Skip to main content
A VibeFlow canvas with five frames at different aspect ratios and an attached design system

​
Canvas

A canvas is a document you own at /canvas/:id. It holds your frames, your chat history, and a few pinned settings: A canvas belongs to an organization and is owner-scoped. Other people in your org cannot edit it today (multiplayer is coming soon). They can clone a copy if you publish it to the community gallery.

​
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.
You can also create a canvas from your editor via the MCP, then drive it from chat.

​
Frame

A frame is a fixed-size artboard rendered as inline HTML inside an iframe on the canvas. That’s the whole shape. Each frame is independent. Editing one never touches the others. Frames don’t share state at runtime, but they do share your design system. A single agent change can update one or many frames in a single turn.

​
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.
You can also drop a blank frame manually with the F keyboard shortcut, but those are local-only until the agent fills them.

​
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
Frame · 1080 × 1080
Launch week
On-brand HTML the agent wrote. Inline styles only.
Get started
Pixi positions the frame shell · the iframe renders your HTML · exports read the same DOM
Two things follow from this:
  1. What you see is what exports. PNG/PDF/PPTX walk the iframe DOM. There is no separate render target.
  2. 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

If you close the tab mid-generation, the canvas survives. If you reload during an agent turn, the frames already created are still there. The agent’s in-flight turn restarts cleanly from where it was.

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