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
Frequently asked questions
Can I use Statechart Playground to simulate a traffic light state machine?
Yes. Statechart Playground can simulate a traffic light state machine, directly in your browser.
Can I use Statechart Playground to build a checkout flow with guard conditions?
Yes. Statechart Playground can build a checkout flow with guard conditions, directly in your browser.
Can I use Statechart Playground to visualize state transitions as a live diagram?
Yes. Statechart Playground can visualize state transitions as a live diagram, directly in your browser.
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.