Skip to content
Version: XState v4

Visualizer

The Stately Visualizer is a tool for creating and inspecting statecharts to visualize the state of your applications. You can use the viz as a playground for exploring XState’s capabilities.

Stately Visualizer with a split screen. The left side shows a visualized machine for a video player. The right side shows the JavaScript used to create the visualized machine.

As a visual tool, the Visualizer helps developers get an overview of their application logic and makes it easy to share with designers, project managers and the rest of the team.

  • Write your application logic and immediately visualize it.
  • Save your statecharts to the Stately Registry and share them with anybody.
  • Share your statecharts in your team’s documentation with embedded mode and live-updating snapshot images.

Try the Visualizer

The Visualizer is available now and will be free and open source forever. Contributions are welcome!

Feedback and bug reports

If you have any feedback or feature requests, please join our Discord server, where you’ll find our team and the wonderful Stately community.

Please submit any bug reports as GitHub issues on the XState repository.