Introduction
Statefully is a visual tool for designing and prototyping state machines. Define your states with a simple text syntax, see them visualized as nested boxes, and prototype how each state should look.
What is a State Machine?
A state machine describes the different states something can be in and how it transitions between them. For example, a traffic light can be in states like Green, Yellow, or Red, and transitions happen on a timer.
The Three Panels
Spec Editor
Define your states using a simple indentation-based syntax. Nesting is done with tabs, transitions with arrows.
Diagram View
See your states visualized as nested boxes. Click on states to select them. Transitions are shown as clickable links.
Prototype Panel
Define how each state renders using a simple DSL. Add click handlers to trigger transitions.