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.

As a visual tool, the Visualizer helps developers get an overview of their application logic, as well as making it easy to share and 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.

• 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.

The Visualizer already has many features to help you make your code do more.

Write and visualize your code instantly

1. Use the code editor in the Code tab to write your machine code.
2. Press Visualize to visualize your machine.

There are multiple ways you can share your machines with your team and across the web.

The share menu contains four options:

1. Copy link. Copy the Visualizer URL for the machine.
2. Twitter. Composes a tweet with a link to the machine.
3. Copy Image URL. Copies a URL for a snapshot image of the machine.
4. Embed. Creates an embeddable iframe containing the machine.

The Twitter link option in the share menu composes a tweet with a link to the machine’s Visualizer URL.

The Copy Image URL option in the share menu copies the URL for the image of the machine to your clipboard. The image is a snapshot of the machine, and will update with any changes to your machine.

The image below is a snapshot of David’s example fetch machine.

The Embed option in the share menu opens an options panel for an embeddable iframe of the machine.

Copy the code from the text area and paste it wherever you want to embed the machine. The machine can be embedded anywhere you can use iframes.

The embedded machine below is David’s example fetch machine in full mode with an active state panel, no link to the Visualizer, and control buttons enabled with panning and zooming both enabled:

You can choose from a number of options for your embedded machine:

The default mode is viz.

• viz: Show only the Visualizer in the embedded iframe.
• panels: Show only the Code, State, Events and Actors panels in the embedded iframe.
• full: Show both the Visualizer and the Code, State, Events and Actors panels in the embedded iframe.

In viz and full modes, there are further options to show the control buttons for the Visualizer. When show control buttons is selected, there are additional options to Allow panning and Allow zooming. If these options are not selected, the buttons will be visible but disabled.

In panels and full modes, there are further options to select the active panel, make the Editor readonly, and show the original link to the Visualizer.

Found a useful machine in the Registry?

You can fork the machine, using the Fork button, and make it work for your own uses.

The Visualizer has descriptive error messages to help you understand and correct the issue when your code can’t be visualized.

The error will fade away after 4 seconds. Press Visualize to view the error again.

In the Visualizer’s settings you can choose from thirteen color themes for the code editor, including the default XState Viz theme.

• XState Viz
• Night Owl
• All Hallows Eve
• Amy
• Blackboard
• Cobalt
• Merbivore Soft
• Monokai
• Tomorrow Night
• Poimandres
• Garden of Atlantis
• Martian Night
• Atom One Dark

1. Go to Settings using the button in the top menubar.
2. Scroll down to the Editor Theme section.
3. Choose your preferred theme from the dropdown menu.
4. Go back to the Code view using the Code button in the top menubar.

The view controls panel helps you navigate around your statechart.

• 

  Zoom out. Zoom out of the canvas to view more of your statechart.

• 

  Zoom in. Zoom into the canvas to view details in your statechart.

• 

  Fit to view. Fit your entire statechart into the available viewing space.

• 

  Reset canvas. Reset the statechart’s position to the top left of the viewing space at 100% zoom level.

• 

  Hand tool. Select the hand tool to enter press and drag mode. Then press, hold and drag to move around the canvas. To exit press and drag mode, deselect the hand tool.

• 

  Reset button. Reset the statechart’s sequence to its initial state.

You can use keyboard shortcuts for common Visualizer commands. Find the list of Keyboard shortcuts in the Settings.

• CMD + S Saves or updates the code in Stately Registry.
• CMD + Enter Visualizes the current editor code.
• CMD + K Show the Command palette.
• Shift + ? Show the Command palette.

Use the CMD + K or Shift + ? keyboard shortcut to show the command palette. The command palette gives you quick access to common Visualizer commands.

The command palette will have more commands in the future.

• Sign in with GitHub
• Auto-saves locally so you won’t lose your work

We’ve got many more features coming soon. Including:

• Support for Lucy DSL (domain-specific language)
• Custom event and event payload support

Take me to the Visualizer!

Try the Visualizer in Inspect mode

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

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

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