Subscribe
Sign in
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.
18
Replies
@flybayer It's planned to support other code editors and IDEs other than VSCode in the near future. Also expose these features via a CLI for power devs.
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!
@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.
@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.
@simon_liang Hey Simon, great question. XState and the related open-source tools (including the visualizer) will always be free and MIT-licensed; feel free to use them in commercial products. The editor is closed-source, and we do have future plans to make it embeddable. We're still working on the details for that (including licensing), but feel free to email me (david at stately dot ai) and we can discuss further.
This is so wildly useful to model complex application logic in a visual way. Makes it really easy to review and becomes accessible to PMs and UX designers. Bravo! 🙌
The Stately Editor is a fantastic tool, and its visual building allows more than just developers to create statecharts. While that may mean the rest of your team needs to learn some concepts they didn't know before, it will be beneficial to you, them, the product, and the company. Statecharts can become the universal way your company describes application behaviors - and this editor, though still in beta, makes that substantially easier. And all that ease it brings to non-developers is just as awesome as for the developers too.
Flightcontrol