Skip to content
Version: XState v4

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 currently export your machine as JSON, JavaScript, and TypeScript code using the code panel in the right tool menu. You can also export as code from the Export machine dialog using the export icon button in the editor’s top bar.

Export code from the code panel​

Simplified drawing of the Stately Studio architecture described above.

  1. Open the Code panel from the right tool menu.
  2. Use the JSON, JavaScript, or TypeScript buttons to display the code in your preferred format in the text area.
  3. Use the Copy button to copy the code to your clipboard.
  4. Paste into your code editor.

Export code using the header export icon​

Simplified drawing of the Stately Studio architecture described above.

  1. Open the export Code modal using the export icon in the header.
  2. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
  3. Paste into your code editor.

Export code from the machine menu​

Simplified drawing of the Stately Studio architecture described above.

  1. Open the machine menu by clicking the ellipsis button to the right of the machine name.
  2. Click the Export code button in the menu to open the Export machine dialog.
  3. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
  4. Paste into your code editor.