> ## Documentation Index
> Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Exports overview

> Every format the canvas ships. What's editable, what's flat, what to pick.

The canvas exports through two paths. **Server exports** render frames headlessly and stream a file back: PPTX, PDF, PNG, JPG. **Client exports** generate code on the fly: HTML, React, and a portable prompt. Both live behind the **Export** button in the right sidebar.

## Picking a format

| Format     | What you get                                                                | Best for                                                                    | Pipeline |
| ---------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- |
| **PPTX**   | Real PowerPoint file. Editable text boxes, shapes, lists.                   | Decks shared with stakeholders. Anyone with PowerPoint or Keynote can edit. | Server   |
| **PDF**    | Vector PDF, one frame per page.                                             | Print, formal share, version pinning.                                       | Server   |
| **PNG**    | Lossless raster, one file per frame. Multi-frame downloads as `.zip`.       | Social, ads, thumbnails.                                                    | Server   |
| **JPG**    | Smaller raster, one file per frame. Multi-frame as `.zip`.                  | Email attachments, social where size matters.                               | Server   |
| **HTML**   | A self-contained `.html` file per frame, or a `.zip` for multiple.          | Drop into emails, blogs, or static sites.                                   | Client   |
| **React**  | A `.tsx` file per frame, or a zipped React + Tailwind project for multiple. | Pull into an existing codebase.                                             | Client   |
| **Prompt** | A clipboard prompt that rebuilds this frame in any other AI tool.           | Handing off to a different agent or human.                                  | Client   |

For exporting an SVG element (rather than a whole frame), select an `<svg>` inside a frame and use the right sidebar **Download SVG** action.

***

## Per-frame vs whole canvas

Both server and client exports support selection-aware export:

* **Nothing selected.** The export covers the whole canvas. Multi-frame outputs come back as a `.zip`.
* **One frame selected.** The export covers that frame only. Single file.
* **Multiple frames selected.** Multi-frame export, zipped if more than one file.

Frame order in a multi-frame export follows your canvas left-to-right, top-to-bottom by default.

***

## Server exports (PPTX / PDF / PNG / JPG)

When you trigger a server export the backend:

1. Renders each selected frame at its true size, headlessly.
2. Walks the iframe DOM, mapping computed styles into the export format's primitives.
3. Packages the output, uploads it to R2, and streams a signed URL to your browser.

The download starts automatically.

<Note>
  PPTX walks the DOM, not the pixels. `<h1>` becomes an editable PowerPoint title. `<ul>` becomes a real bulleted list. `<img>` is embedded as a real image. CSS gradients and filters that don't translate cleanly are pre-rendered as PNG and embedded.
</Note>

### Common gotchas

<AccordionGroup>
  <Accordion title="A PPTX export wraps text on a different line than the browser">
    PowerPoint uses its own text-shaping engine, so titles that fit exactly in Chrome can wrap onto two lines in PowerPoint. Ask the agent: *"Add 4 to 8 pixels of horizontal slack to tight text boxes."* That almost always fixes it.
  </Accordion>

  <Accordion title="A gradient or filter looks different in the export">
    A handful of CSS effects don't translate. The exporter pre-renders them as PNG. If a specific section is sensitive, ask the agent: *"Pre-render this hero as a single image so the export is pixel-exact."*
  </Accordion>

  <Accordion title="My fonts changed in PowerPoint">
    The deck used a webfont the recipient doesn't have. PowerPoint substituted. Ask the agent: *"Switch the deck typography to fonts that ship with Office."* Calibri, Aptos, Arial, Georgia, Cambria, and Consolas all ship with both Mac and Windows Office.
  </Accordion>

  <Accordion title="PDF page breaks split a section">
    PDF is one frame per page. If you want one section per page, generate them as separate frames.
  </Accordion>
</AccordionGroup>

***

## Client exports (HTML / React / Prompt)

These run in your browser and never touch the server.

### HTML

A standalone `.html` document per frame. Inline styles, no JavaScript, no runtime. Open it in any browser, paste it into an email, drop it into a static site.

### React

Two flavors, picked by selection size:

* **One frame.** A single `.tsx` file with a default-exported component. Tailwind classes. Self-contained.
* **Multiple frames.** A `.zip` with a minimal Vite + React + Tailwind project: every frame is a component, plus a root `App.tsx` that routes between them.

The HTML-to-React conversion runs in your browser. It's deterministic. You get the same output every time for the same frame.

<Tip>
  React export is great for handing off to a developer. **Add to app** (the promote-to-app flow) is better when you want the frames to *become* a live, deployed React app you can keep iterating on. See [Promote to app](/exports/promote-to-app).
</Tip>

### Prompt

The Prompt export copies a clipboard-ready prompt that describes the frame in enough detail for any other AI tool (ChatGPT, Claude, v0) to rebuild it. Useful for cross-agent handoff or for archiving a frame in plain text.

***

## What's missing today

We are upfront about gaps:

* **Whole-canvas single HTML file.** Today HTML exports are one file per frame. A single-page scrollable HTML export is on the roadmap.
* **Direct Figma export.** Not shipped. Today you can export PNGs and import them into Figma as flattened images.
* **Custom export presets** (e.g. "always export at 2x for social"). Today you pick format and selection per export.

If your team needs one of these, email <a href="mailto:founders@vibeflow.ai">[founders@vibeflow.ai](mailto:founders@vibeflow.ai)</a>.

## Next

<CardGroup cols={2}>
  <Card title="Promote to app" icon="rocket" href="/exports/promote-to-app">
    Turn frames into a deployed Vite + React app on your domain.
  </Card>

  <Card title="MCP exports" icon="plug" href="/mcp/tools#export-tools">
    Trigger the same exports from your editor via the MCP.
  </Card>
</CardGroup>