# Source: https://stately.ai/docs/export-as-code.mdx

# Export as code (/docs/export-as-code)
import { Code, MoreHorizontal, Copy } from 'lucide-react';

Exporting as code is useful if you want to use your machine with [XState](xstate) inside your codebase or if you want to duplicate your machine without using **Fork**.

<Callout>
  You can now [generate a React app from your machine](generate-react).
</Callout>

Every feature of your state machine will be included in the code, except for [colors](colors) and [notes](annotations). Your last used export settings will be remembered next time you open the <Code size={18} /> **Code** panel.

## Export formats

You can export as code from <Code size={18} /> **Code** panel or the <MoreHorizontal size={18} /> 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 size={18} /> 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](studio-pro-plan))
* Stories (*beta*) for use in requirements and documentation ([available on premium plans](studio-pro-plan))
* [Mermaid](https://mermaid.js.org) code and diagrams for use in GitHub, GitLab, and anywhere Mermaid is supported

<Callout>
  You can also [import from code](import-from-code) from <Code size={18} /> **Code** panel or the <MoreHorizontal size={18} /> menu alongside the machine name in the machines list.
</Callout>

### Export to CodeSandbox and StackBlitz

You can export your machines to CodeSandbox and StackBlitz from the <Code size={18} /> **Code** panel. The machine will be exported in your chosen format as a basic JavaScript app that uses XState to run the machine.

<Callout>
  Wrap your Mermaid code in a fenced code block with the `mermaid` language identifier to [share your diagram on GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams) and [share your diagram on GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/).
</Callout>