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.
Canvas
A canvas is a document you own at/canvas/:id. It holds your frames, your chat history, and a few pinned settings:
| What’s on a canvas | What it does |
|---|---|
| Frames | The artboards visible in the viewport. Any number, any size. |
| Chat history | Every brief, every reply, every tool call. Multiple chats per canvas. |
| Design system | Optional, pinned to the canvas. Locks brand for every future generation. |
| Style preset | Optional aesthetic (e.g. Editorial, Glassmorphism) layered on top. |
| Assets | Images you’ve uploaded or generated, addressable by the agent. |
Creating a canvas
From the home composer
/home → toggle to Canvas → brief → Generate. You land on /canvas/:id with the agent already streaming.From the canvas list
/canvas → New canvas. Blank canvas, then talk to the agent in chat.From a community template
/community → pick a canvas template → Use template. You get an owned copy.Frame
A frame is a fixed-size artboard rendered as inline HTML inside an iframe on the canvas. That’s the whole shape.| Property | Detail |
|---|---|
| Size | Set per-frame. Common sizes: 1440 × 900 desktop, 1920 × 1080 slide, 1080 × 1080 social, 390 × 844 mobile, 1200 × 628 ad. Any custom size works. |
| Position | x, y on the canvas. Drag with the mouse. |
| Stack order | A z index per frame. Frames can overlap. |
| Content | Inline-styled HTML. No <script>, no form controls. Validated before render. |
| Storage | Inline on the frame, or spilled to a Convex blob when the HTML gets large. |
| Editable | Double-click to edit in place. Text, layout, deletes write back automatically. |
Creating a frame
You almost never make frames by hand. The agent makes them in response to chat. The common patterns:- “Add a third slide with a chart of monthly revenue.” → one new frame, sized like the others.
- “Build me a landing page, a 1080 social cut, and a mobile mock for the same launch.” → three frames, three sizes, same brand.
- “Duplicate this frame and try a dark variant.” →
duplicate_frame→ tweak.
How the canvas renders
Each frame is real HTML in an iframe on the canvas. Not a screenshot, not a terminal sketch. What you see is what exports.Canvas viewport · pan & zoom
Pixi positions the frame shell · the iframe renders your HTML · exports read the same DOM
- What you see is what exports. PNG/PDF/PPTX walk the iframe DOM. There is no separate render target.
- Frames are sandboxed from each other. They share the design system at generation time (via the agent prompt), not at render time (via shared DOM).
What’s persisted, what’s local
| Lives in Convex | Lives only in your tab |
|---|---|
| Canvas record (name, design system, style) | Pan / zoom position |
| Every frame (HTML, position, size, z) | Selection state |
| Every chat message and tool call | Element pointers in the comment composer |
| Generated images (R2-backed) | Manually-dropped blank frames (F key) until filled |
What a canvas is not
- Not a design tool. No vector tools, no pen, no boolean ops. Frames are HTML. You shape them by talking to the agent or editing the inline HTML.
- Not a docs tool. No long-form pages. Frames are bounded artboards. For long pages, generate a landing-page frame at 1440 × 4000+ and scroll inside it.
- Not a runtime. Generated React apps live in the promote-to-app flow, not on the canvas. The canvas renders static HTML.
Next
The chat
The agent loop. How it plans frames, what tools it calls.
Inline edit
The AI Pointer. Click any element, drop a note, the agent edits exactly that.