Visualize XState state machines and statecharts in real-time.
🪄 Use the new Stately visual editor 🔗 Use the legacy Visualizer.
Visit stately.ai/viz to use the Visualizer.
Alternatively, you can install it locally (see installation)
- Create XState machines in JavaScript or TypeScript right in the visualizer
- Simulate machines visually by clicking on events
- Pan and zoom into the visualized machine
- View current machine state
- View list of events sent to the simulated machine
- Access quick features via the command palette: cmd/ctrl + k
- Inspect machines by setting
url: 'https://stately.ai/viz?inspect'in@xstate/inspect
- Clone this GitHub repo
- Run
yarn install - Run
yarn startand visit localhost:3000/viz