Advertisement
Guide
About the State Machine Designer
A state machine makes a UI flow or a protocol explicit: it can only be in one state at a time, and only listed events move it on. Drawing it first shows the gaps — the error with no way out, the button that should do nothing while loading — before they become bugs.
The same diagram becomes an XState machine if you use XState, or a small reducer you can drop into any codebase if you do not. Guards are tried in order, guarded ones first, in both.
How to use it
- 1Pick a template, or add states with + Add node.
- 2Drag from a state’s bottom dot to another state to add a transition.
- 3Click an arrow to set its event, guard and actions; click a state to rename it or mark it initial.
- 4Open the Code tab for XState v5, the TypeScript reducer or Mermaid.
Frequently asked questions
Which XState version is this for?
XState v5. The machine is built with setup({ types, actions, guards }).createMachine(…), so events are typed and every named action and guard has a stub to fill in.
What happens to entry and exit actions in the reducer?
A transition to a different state calls the old state’s exit actions, the transition’s actions, then the new state’s entry actions. A transition back to the same state runs only its own actions, as XState does by default.
Are nested or parallel states supported?
Not yet — this designer covers flat machines, which is what most UI flows need.