Design mode

Learn how to use Design mode in Stately Studio’s editor.

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

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

• Machine restore

  The Studio is built using a server-client architecture.

• Autolayout

  Autolayout chooses an optimal layout for your machine to make it easier to read and understand. When you import a machine, autolayout will be applied automatically. Otherwise, you can autolayout your machine anytime using the Autolayout button.

• Annotations

  Annotations are notes you can use to annotate your machine, positioned anywhere inside your machine. Annotations are useful for information or comments you want to add to your machine that are only visible inside Stately Studio and not included when you export as code.

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

• Colors

  You can highlight your machine’s state and event nodes with colors. You can use colors however you like; some ideas include: