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.

You can now generate a React app from your machine.

Every feature of your state machine will be included in the code, except for colors and notes. Your last used export settings will be remembered next time you open the Code panel.

Export formats

You can export as code from Code panel or the menu alongside the machine name in the machines list.

Use the XState version 5 beta toggle to choose between code supported by XState version 4 and XState version 5. Copy the code to your clipboard with the copy button.

• JSON code for use with XState
• JavaScript code for use with XState
• TypeScript code for use with XState
• Markdown (beta) for use in documentation (available on premium plans)
• Stories (beta) for use in requirements and documentation (available on premium plans)
• Mermaid code and diagrams for use in GitHub, GitLab, and anywhere Mermaid is supported

You can also import from code from Code panel or the menu alongside the machine name in the machines list.

Export to CodeSandbox and StackBlitz

You can export your machines to CodeSandbox and StackBlitz from the Code panel. The machine will be exported in your chosen format as a basic JavaScript app that uses XState to run the machine.

Wrap your Mermaid code in a fenced code block with the mermaid language identifier to share your diagram on GitHub and share your diagram on GitLab.