Visual Statechart Editor
Visually creating Statechart and Finite State Machine.
![](/images/product-hero-illustration-1.png)
![Data Lifecycle illustration](/images/1.png)
Visual Editing
Easily and quickly create Statecharts and Finite State Machine with the visual editor.
- add, remove, rename states and events,
- drag and drop to set event targets
- move states to other state to become a child state
- select and delete lines
![Distribute Data illustration](/images/2.png)
Round-trip Editing
With visual and code editor side-by-side, selected state can be edited in the code editor and changes will be applied on-the-fly which provides the most intuitive round-trip editing for statecharts.
![Serverless Data Management illustration](/images/3.png)
Snapshots
One click to generate shapshot of individual state or the whole chart as a PNG file.
![Serverless Data Management illustration](/images/4.png)
Export Formats
Export statechart as javascript (in Xstate format) or XML (in SCXML format) to use it across different platforms and languages.
![Serverless Data Management illustration](/images/5.png)
Menus everywhere
Quick access to mostly used functionalities is the key to create high quality statecharts and efficient workflow, with StatesKit you could right click anywhere to access the menu.
![Serverless Data Management illustration](/images/6.png)
Drop file to Edit
Drop existing statechart files (in Xstate format) and start editing immediately, when done just export and download a new javascript file or copy changed content.