Publish and export
Download your file as a ready-to-host site or a React project, copy a page as HTML or Tailwind, or save layers as PNG and SVG.
Checked against uxdeck on 16 October 2026
Exports take your work out of uxdeck. Pictures (PNG and SVG) are for decks, tickets and hand-offs. Code (a site folder, a React project, HTML or Tailwind) is for developers, or for hosting the site yourself. If you only want the site online, Publish is quicker: it needs no export at all.
Where the exports are
- The top bar: owners press ⋯ (Export options), to the left of Invite and Publish. Anyone else presses Export.
- The main menu: File > Export page, which also holds Download PNG and Download SVG.
- Deck settings (⌘,) > Export: the same code exports, each with a note on what it gives you.
Export the site or its code
| Export | What you get |
|---|---|
| Download the site (zip) | Every page as a real document, with its images, fonts and motion beside it. Host the folder as it is, with no build step. |
| Download as React (zip) | A React project (Vite and TypeScript): a component for each screen, and your components with their properties as props. Run npm install, then npm run dev. |
| Copy page as HTML + CSS | The page in view’s markup and styles, with the coach’s findings at the top, to paste into a project. |
| Copy page as Tailwind | The same markup with Tailwind classes. |
The site zip is the same site Publish puts online: motion, effects, Blocks and links between screens all play, and your Site settings (title, description, icons) go with it. A README.txt inside says how to serve it.
What the React project leaves out
The React project carries your screens, components, variables (as CSS custom properties, one block per mode) and links between screens. It does not carry motion (appear, scroll and hover effects), or prototype behaviour beyond links and a click that changes a component’s variant: overlays, variables, conditions, hover variants and animated transitions are left out. Download the site for a version that plays them.
Pictures: PNG and SVG
Download PNG (at 1×, 2× or 3×) and Download SVG export the selection, or the whole page when nothing is selected. The menu says which: (page), (selection) or the number of layers.
For a selection, you can also:
- right-click and choose Copy as… > PNG (⇧⌘C) or SVG;
- open Export at the bottom of the Design tab, choose a Scale and an Image format, check the preview, and press Export.
A PNG is drawn here, with your fonts already loaded, so it looks exactly like the canvas. An SVG is made of real shapes, text and pictures, so it opens as editable artwork in other design tools; shadows, blurs and blend modes come with it.
What each plan allows
| What | Free | Pro |
|---|---|---|
| PNG and SVG | Yes | Yes |
| Site zip, React, HTML, Tailwind | No | Yes |
On Free, the export menu shows a short Export as code card with See plans.
Catches
- An SVG needs its fonts installed wherever it is opened, or its text falls back to another font. A PNG does not.
- Licensed fonts are not bundled. A typeface you uploaded is licensed to you, so the toast asks you to add its files to
fonts/(in the site) orpublic/fonts/(in React); the README there names them. A font that could not be fetched shows in a system font; export again when online. - Copy page exports the page in view, not the whole file. Switch page first.
- Code reads best from auto layout. Loose layers come out positioned, which is harder to work with. See Auto layout.