XState Visualizer

Visualize XState state machines and statecharts in real-time.

🔗 Use the Visualizer.

Usage

Visit stately.ai/viz to use the Visualizer.

Alternatively, you can install it locally (see installation)

Features

• 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
• Save your machines in the Stately Registry
• And many more upcoming features

Installation

1. Clone this GitHub repo
2. Run yarn install
3. Run yarn start and visit localhost:3000/viz

Releases

https://www.loom.com/share/5357e00577e64387b45de8ee65cb3805