Skip to content
Version: XState v5

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.

Every feature of your state machine will be included in the code, except for colors and annotations.

Export formats​

You can currently export your machine as:

  • JSON code for use with XState
  • JavaScript code for use with XState
  • TypeScript code for use with XState
  • Mermaid code and diagrams for use in GitHub, GitLab, and anywhere Mermaid is supported

How to export as code​

You can export as code by:

  • Using the Code panel in the right tool menu
  • Using the menu alongside the machine name in the machines list
  • Using the export icon button in the header

Export to JSON, JavaScript, or TypeScript​

  1. Use one of the options above to open the Export to code modal or Code panel.
  2. Use the dropdown menu to choose from JSON, JavaScript, or TypeScript.
  3. Use the XState version 5 beta toggle to choose between code supported by XState version 4 and XState version 5 beta.
  4. Use the Copy button to copy the code to your clipboard.
  5. Paste into your code editor.

Export to Mermaid​

  1. Use one of the options above to open the Export to code modal or Code panel.
  2. Use the dropdown menu to choose Mermaid.
  3. Use the Copy button to copy the code to your clipboard.
  4. Use the Preview tab to preview the diagram and Copy SVG to copy the diagram SVG to your clipboard.
  5. Paste into your code or graphics editor.