Design mode

Learn how to use Design mode in the Stately Editor.

• Descriptions

  You can add descriptions to state and event nodes to describe their purpose and share related notes with your team. Descriptions support markdown formatting, including links and images.

• Version history

  Version history is helpful if you want to save checkpoints while modeling machines or mirror version changes in the rest of your codebase. New versions can be saved from the current machine using the Version history panel in the right tool menu when in Design mode.

• Import from code

  Importing from code is helpful if you’ve already built machines while working with XState, or have created a machine using our older Stately Viz but haven’t yet tried the Stately Studio Editor.

• Export as code

  Exporting as code is useful if you want to use your machine with XState inside your codebase or if you want to duplicate your machine without using Fork.