# Export and code

Export an artboard or a layer as PNG, SVG or PDF, record an artboard as a WebM video, and copy any part of a design as HTML, React, Tailwind, Vue, Svelte, SwiftUI or Jetpack Compose.

Canonical page: https://themachine.myapps.ai/docs/desktop/design/export-and-code

## Export a picture or PDF

Select an artboard, or a single layer, and scroll to **Export** at the
bottom of the right panel:

![The Export section: PNG, SVG or PDF, 1x, 2x or 3x, and Export iOS · Today](/images/docs/desktop/design-panel-export.webp)

1. Pick **PNG**, **SVG** or **PDF**. For PNG, pick the size: **1x**, **2x**
   or **3x**.
2. Click **Export** and choose where to save it (it starts in Downloads).

A layer exports on its own, at the size it's drawn. Pictures from your
design are included. PDF is one page, the size of the artboard. Design
remembers your format for next time (PNG at 2x to begin with). Exports are
up to 10,000 px a side; a bigger artboard is cut off.

SVG files are real vector shapes, so you can open and edit them in Figma,
Illustrator, Sketch or Inkscape. Every layer comes out as its own named
group: boxes keep their fills (colours, gradients and pictures), borders,
rounded corners and shadows; text stays editable text, line by line, in its
font, size, weight and colour; vector shapes keep their paths; and frames
that clip their contents still clip them. The few things SVG can't draw
(an angular gradient, a tiled pattern or vertical text) are kept as they
look in Machine for that one layer. The other app needs the same fonts
installed to show the text exactly as it looks here.

## Record a video

An artboard with animations or shader fills can be saved as a short video
that shows them moving. Select the artboard (not a layer) and find **Video**
under **Export**:

1. Pick how long: **3 s**, **5 s** or **10 s**.
2. Click **Record** and choose where to save it (it starts in Downloads).

The bar on the button shows how far along it is. You can keep designing
while it records; the video shows the artboard as it was when you clicked.
Click **Cancel** to stop, and nothing is saved.

Videos are **WebM** at 30 frames a second, which browsers, VLC and most
video editors open. MP4 isn't available yet; to get one, convert the WebM
with a free tool such as HandBrake. Animations and shaders start from the
beginning as the recording starts. Artboards bigger than 1920 px on their
long side are scaled down to fit.

## Copy as code

The **Copy** button in the top bar copies what's selected as code, ready to
paste into a project. Its arrow (**Choose a code format**) copies in another
language (and remembers it), or opens **Copy whole artboard**, where you
can read the code before you copy it:

![Copy as code: the language list on the left and the code for iOS · Today on the right](/images/docs/desktop/design-code-dialog.webp)

| Format | You get |
|---|---|
| **HTML** | One file with inline CSS. |
| **React / Next.js** | A component with inline styles. |
| **React + Tailwind** | A component with Tailwind classes only. |
| **Vue** | A single-file component. |
| **Svelte** | A component with inline styles. |
| **SwiftUI** | An iOS and macOS view. |
| **Android · Jetpack Compose** | A Kotlin composable. |

The web formats keep every fill and border. SwiftUI and Compose keep a
layer's bottom colour, its top gradient and its borders; image fills are left
out, and Compose turns a linear gradient's angle to the nearest 45°.

Shapes and icons (vector layers) come out as an inline `<svg>` in the web
formats, a `Path` in SwiftUI and a `Canvas` in Compose. A mask comes out as
a box clipped with `mask-image` in the web formats; SwiftUI and Compose leave
the clipping out.

In **Copy whole artboard**, use **↑** and **↓** to pick a language and
**Enter** to copy. Right-click any layer or artboard for **Copy as** your
last format, too.

## Take it further in Machine Code

To turn a design into a working app, open it in
[Machine Code](/docs/desktop/design/machine-code): a coding agent there can
see every artboard and build it for real.