Skip to main content

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.

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

FormatWhat you getBest forPipeline
PPTXReal PowerPoint file. Editable text boxes, shapes, lists.Decks shared with stakeholders. Anyone with PowerPoint or Keynote can edit.Server
PDFVector PDF, one frame per page.Print, formal share, version pinning.Server
PNGLossless raster, one file per frame. Multi-frame downloads as .zip.Social, ads, thumbnails.Server
JPGSmaller raster, one file per frame. Multi-frame as .zip.Email attachments, social where size matters.Server
HTMLA self-contained .html file per frame, or a .zip for multiple.Drop into emails, blogs, or static sites.Client
ReactA .tsx file per frame, or a zipped React + Tailwind project for multiple.Pull into an existing codebase.Client
PromptA 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.
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.

​
Common gotchas

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.
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.”
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.
PDF is one frame per page. If you want one section per page, generate them as separate frames.

​
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.
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.

​
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 [email protected].

​
Next

Promote to app

Turn frames into a deployed Vite + React app on your domain.

MCP exports

Trigger the same exports from your editor via the MCP.