12 / 20AI, realtime & offline
State Machines
Complex UI flows modeled as finite state machines, with a live visual of the machine.
- Finite state machines
- Statecharts
- Async flows
- Testable UI logic
stirling.lab/state-machines Live demo
Loading demo…
What to notice
- A multi-step checkout and a media player driven by explicit state machines
- A live diagram highlighting the current state and available transitions
- Impossible states made impossible: no loading-and-error-at-once bugs
- Event log with time-travel to any previous state
How it's built
- A tiny typed machine interpreter with named guards and actions and delayed transitions, so the definition is plain data.
- Logic is pure and testable without rendering; the UI just reads state.value.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.