Stately Viz

Visualize, simulate, and inspect your state machines

20 followers

Stately Viz visualizes, simulates, and inspects state machines and statecharts created with XState in real-time.
This is the 2nd launch from Stately Viz. View more

Stately Editor Beta

Visually create and simulate complex app logic, workflows
The Stately Editor is a visual tool for creating, editing, and simulating application logic and workflows, no matter how complex they are.
Stately Editor Beta gallery image
Stately Editor Beta gallery image
Stately Editor Beta gallery image
Stately Editor Beta gallery image
Free
Launch Team

What do you think? …

David Khourshid
Hey, Product Hunt! I'm David, the founder of Stately and creator of XState, a library for managing complex application logic visually with state machines, statecharts, and the actor model. Our mission is to make app logic accessible to the entire team, including developers, designers, and stakeholders. Using state machines and statecharts as a common visual language, the software development cycle becomes more collaborative, eliminating handoff and tightening the feedback loop. I’m so excited to launch the public beta of the Stately Editor. We’ve been working very hard on this for many months, with ideas and plans for it going back many years. The Stately Editor is a tool for creating and editing state diagrams. We’ve received a lot of great feedback from the private beta testers, and now we’re delighted to share it with everyone. And yes, it goes both ways: edit the code and see the updated statechart. Edit the statechart diagram and see the updated code. All in real-time. We've launched the XState extension to give you the power to do just that – sync XState code and state diagrams right inside of VS Code: https://marketplace.visualstudio... The editor supports everything you need to build state diagrams visually. We have a long list of features planned for the editor, including: - Parameterized actions, guards, and invocations - Built-in actions, such as assign and raise - Schema editing for context and events - More granular simulation control, such as specifying event payload and simulating delays - Visualizing systems of actors, including spawned and invoked machines - Warnings and errors for invalid machine definitions - Customizable state node, event, and transition colors - Rich text editing and content for state descriptions - Markdown generation - Event recording and playback - Machine versioning and diffing - Autolayout and smart layout controls - And so much more. Let us know if you have any feedback, feature requests or bug reports. The editor is our first significant step towards making the ultimate collaborative tool for visually editing even the most complex app logic. We’re excited to share the Stately Editor with the world, and we’re looking forward to hearing your reactions. Happy diagramming!
Alireza Ahmadi
@david_khourshid Congrats on the launch 🚀 I've been following Stately for a few months, and I can't wait to start using your extension. I just wanted to mention that the current VSCode marketplace link (in your description) returns 404.
Matt Pocock
@david_khourshid @alireza94 Appears to work for me?
Alireza Ahmadi
@mattpocock @farzad_yz It works now! Maybe it was a caching problem because, when I wrote the comment, this was the clickable link in the description: https://marketplace.visualstudio... Anyway, It works now, and thanks for the response.
Joshua
Congrats @david_khourshid and team! XState and the editor are amazing!
Mahaveer
This is amazing!!!