Skip to content
Stately

State machine editor

Design how your software behaves. Draw states and transitions, explore them with simulation, and work with XState code in your browser.

Open Stately editorExplore the editor

Sign in or create a Stately account to continue.

An example state diagramAn idle state starts working on a START event. Working reaches done on SUCCESS, or returns to idle on RETRY.idleworkingdoneSTARTSUCCESSRETRY
An example of states, events, and transitions.

Try a state machine without an account

Edit a sample and send events to simulate its behavior. Changes stay in this temporary preview and disappear when you reload, reset, or switch samples.

Turn a state diagram into a model you can explore

A state machine describes the states a system can be in and the events that move it between them. Use Stately to make those rules visible before they become scattered across your application.

Add states and transitions visually. Model nested and parallel states when behavior grows. Simulate your machine by sending events and following the active states, then import or export XState code as you develop the implementation.

Start with a user interface, an approval process, or the lifecycle of a request. Model loading, success, failure, and retry paths so you can discuss the behavior with your team.

Build on state machines and the actor model

XState uses state machines, statecharts, and actors to manage application logic. Design the machine here, then use the documentation to connect its behavior to your application.