The canvas editor lives atDocumentation 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/:id. Four regions you use every day.
Layout
Chat panel (left)
Your conversation with the canvas agent. See The chat and the agent for the full loop.- Composer. Type, attach images, pick design systems and styles.
- History. Every turn the agent has taken on this canvas.
- New chat. Start a fresh thread without losing the old one. Same canvas.
- Stop. Cancel a streaming turn. Frames already landed stay.
Infinite canvas (center)
A Pixi.js viewport rendering your frames. Each frame is an iframe on top of a Pixi node.- Pan. Spacebar + drag, middle mouse, or two-finger scroll.
- Zoom. Cmd / Ctrl + scroll, or pinch.
- Select. Click a frame, shift-click for multi-select, drag-rectangle for marquee.
- Edit in place. Double-click a frame to enter its iframe.
- Right-click. Reference in chat, duplicate, delete, export, copy.
Right sidebar
Tabs for the things you do to a frame, not with it.| Tab | What it does |
|---|---|
| Export | PPTX, PDF, PNG/JPG, HTML, React, Prompt. Per-frame or whole canvas. See Exports. |
| Add to app | Promote selected frames into a deployed Vite + React project. See Promote to app. |
| Assets | Your uploaded and AI-generated images. Drag onto a frame, reference from chat. |
| Settings | Canvas name, attached design system, attached style, connected apps. |
Bottom toolbar
The interaction modes.| Key | Tool | What it does |
|---|---|---|
| V | Select | Default. Click frames, marquee select, drag to move. |
| H | Hand | Pan only. Useful on a trackpad. |
| F | Frame | Drop a blank 400 × 300 frame. Local-only until the agent fills it. |
| T | Text | Drop a text node. |
| C | Comment | The AI Pointer. Click any element, drop a note. See Inline edit. |
Working patterns
Brief → frames → point → export
Brief → frames → point → export
The default loop. Brief in chat, watch frames render, use the comment tool for surgical fixes, export when done. Most canvases finish in this loop.
Clone → tweak → promote
Clone → tweak → promote
Ask the agent to clone a frame from your existing site. Edit the copy and colors. Add to app to deploy it as a real React page.
Variations from one base
Variations from one base
Generate a hero. Duplicate it three times. Use chat to push each in a different direction (“first one, more editorial. Second, more brutalist. Third, our brand exactly.”). Pick the winner.
Side-by-side review
Side-by-side review
Pan so two frames are visible. Use the comment tool on each. Send a single message with both pointers: “These should match the design system. Pick the tighter of the two as canonical.”
Settings worth knowing
- Project settings → Connected apps. If you’ve promoted frames to a UI project, every promote shows here with sync state (in sync, stale, never synced).
- Settings → MCP. Your MCP URL and API key. Same key works for canvas and UI MCP tools. See MCP overview.
- Settings → Credits. Account-level. Open it from the org dropdown, not the canvas. See Credits.
Next
Keyboard shortcuts
The full cheat sheet.
Exports overview
Every format the canvas ships.