Statechart Playground
Statechart Playground
Define a finite state machine as JSON (states, transitions, guard expressions) and simulate it for real — fire events, evaluate guards against a live context object, and watch the current state highlighted on a live Graphviz diagram. A genuine interpreter, not a scripted animation.
Diagram will render here once a valid definition is entered.
Simulation controls will appear here once a valid definition is entered.
A real finite-state-machine interpreter — firing an event evaluates the transition table (and any guard expression, a short JS expression checked against the Context JSON) and genuinely transitions, rejects, or reports a guard failure. The diagram is rendered client-side via Graphviz (@viz-js/viz), with the current state highlighted.
Statechart Playground
Define a finite state machine as JSON (states, transitions, guard expressions) and simulate it for real — fire events, evaluate guards against a live context object, and watch the current state highlighted on a live Graphviz diagram. A genuine interpreter, not a scripted animation.
Common uses
- Simulate a traffic light state machine
- Build a checkout flow with guard conditions
- Visualize state transitions as a live diagram
Also searched as
- finite state machine simulator online
- state machine visualizer json
- statechart playground
- xstate alternative online simulator
- state machine guard conditions example
- traffic light state machine example
- draw state diagram from json
- fsm online editor
- simulate state transitions with events
- graphviz state machine diagram
Frequently asked questions
How do I define a state machine here?
Write it as JSON with states, transitions and guard expressions, then fire events to simulate it.
How do guard conditions work?
Guards are evaluated against a live context object you can edit, so a transition only fires when its guard is true.
Is the simulation real?
Yes, it is a genuine interpreter rather than a scripted animation, and the current state is highlighted on a live Graphviz diagram.
Is this an XState replacement?
It is a simple, in-browser way to design and test finite state machines using its own JSON format, not a drop-in XState runtime.
Is my data uploaded to a server?
No. This tool runs entirely in your browser — your input is processed locally on your device and is never uploaded or stored on a server.