Skip to main content
The Canvas toolbar is a floating bar anchored to the bottom-center of the board. It exposes the tools you use to navigate, draw, edit, and add content. The toolbar surfaces in Canvas mode.
Close-up of the Canvas toolbar with icon-only Interact (selected) and Pan buttons on the left, then labeled Chat, Draw, Edit, and Generate buttons on the right

​
Tools

Selecting a tool makes it active. The active tool is highlighted with a filled background. The leftmost cluster is navigation (Interact, Pan). The rest are content and markup tools. Tools are mutually exclusive, which means selecting one deactivates the others.

​
Interact

Interact is the default tool. Use it to select frames, drag them around, and click into a live Artifact to use it as a real running app. With Interact active, clicking a frame selects it and surfaces the per-frame action bar.
Canvas with a Website artifact selected using the Interact tool — the frame is outlined with pink selection handles, the per-frame action bar (Reimagine and Preview) is shown above it, and the inline 'Request changes or chat about frame…' input is shown below. The Interact tool is highlighted in the floating toolbar at the bottom.
Keyboard shortcut: V. Gate: always on.

​
Pan

Pan switches the cursor to a grab tool so you can drag the board itself. While Pan is active, click-and-drag moves the viewport instead of selecting a frame. You can also pan from any other tool by holding the spacebar and dragging, or by middle-click-dragging.
Canvas with the Pan tool active — a Website artifact (Velocity — Supercar Rental) and a Design mockup (Velocity — Home (Mockup)) are visible on the board, and the Pan (hand cursor) tool is highlighted in the floating toolbar at the bottom.
Keyboard shortcut: H. Gate: always on.

​
Chat

Chat drops a small chat composer directly onto the board so you can prompt Agent without leaving Canvas. Selected elements and frames are still attached to the message as snapshots, the same as when you send from the side Agent chat panel.
Canvas in Chat mode with the rest of the board dimmed and the inline chat composer overlaid on a Website artifact. A 'div' chip in the composer indicates a selected element, and the prompt reads 'suggest three alternatives to this image'. The Chat tool is highlighted in the floating toolbar at the bottom.
Gate: Chat tool (desktop only).

​
Draw

Draw activates the markup tools such as freehand draw, arrows, sticky notes, and shapes, so you can sketch on top of frames or annotate the board. Use it to circle problem areas, point to elements you want changed, or leave a written note next to a frame. When Draw is active, a Shape properties bar surfaces above the floating toolbar with color, stroke, and fill controls for the current markup tool. It hides automatically when you switch back to Interact or Pan.
Canvas with the Draw tool active — a drawn 'Widget' rectangle and a purple 'Add a widget' sticky note are placed next to a frame. The Shape properties bar (pencil, text, rectangle, arrow, sticky-note tools plus color swatches and an Aa text-size control) is visible above the floating toolbar, with Draw highlighted.
Gate: always on.

​
Edit

Edit is the visual selector for elements. With Edit active, click inside a live Artifact to target an element (a button, a heading, an image). Selecting an element opens the Visual Editor — a right-side panel of controls (Layout, Color, Border, and more) paired with an inline prompt for asking Agent to change just that piece. See Elements and Visual Editor for the full flow.
Canvas with the Edit tool active — an image element in a Website artifact is selected (highlighted in blue with an 'img' chip label), and the Visual Editor panel shows Layout (Outer/Inner space), Color (Opacity), and Border (color, width, radius) controls plus Discard and Save edits buttons. The Edit tool is highlighted in the floating toolbar.
Gate: always on (desktop). Disabled until at least one frame exists; the tooltip reads “Create an artifact or generate a design to edit.” Hidden on mobile.

​
Generate

Generate opens the Generate media popover for images, videos, and vector graphics. Pick a kind, write a prompt, and Agent places the result as a new frame on the board.
The Canvas + Add menu open with four options stacked vertically: Design ('Mock up interfaces and visual concepts'), Image ('Generate and edit images'), Video ('Generate motion clips and animations'), and Vector Graphic ('Generate vector illustrations and SVGs'). The Generate slot in the floating toolbar at the bottom now reads '+ Generate'.
The popover has four tabs at the top:
  • Design — Image
  • Video
  • Vector Graphic
Some controls are shared across kinds; others are kind-specific. Shared controls (all kinds):
  • Model: the generation model to use. Available models vary by kind (see the table below).
  • Prompt: plain-language description of what you want Agent to generate.
  • Generate: submits the request and reserves a placeholder frame at the cursor position. The placeholder transitions to a live frame once the asset is ready; if generation fails, the placeholder is removed and an error appears in the chat panel.
Per-kind models and controls:
KindBest forCurrent modelsKind-specific controls
ImageRaster output (PNG / JPG); moodboard imagery, hero shots, reference artNano Banana, Nano Banana 2, Nano Banana Pro, ChatGPT Images 2.0Aspect ratio (1:1, 16:9, 9:16, 4:3, 3:4) · Size (1K, 2K, 4K)
VideoShort motion clips and animationsVeo 3.1, Seedance 2.0Aspect ratio · Resolution (e.g. 720p) · Duration (e.g. 4s) · Audio toggle
GraphicSVG vector output; icons, logos, diagrams, stylized illustrationsClaude 4.6 Opus, Gemini 3.1 Pro PreviewAnimated toggle
The model lineup changes frequently. The table reflects what’s currently available; check the in-product dropdown for what your account can use today.
For what each frame kind is and what you can do with it once created, see Frames. When the Add menu is enabled, the Generate button is replaced by a + menu that consolidates the popover’s kinds with Design (a standalone visual mockup that doesn’t touch live code): Gate: Image generation. Vector Graphic needs Vector graphic generation; Video needs Video generation. The + menu requires Add menu (which itself requires Image generation).

​
Keyboard shortcuts

ShortcutAction
VActivate the Interact tool
HActivate the Pan tool
Hold Space + dragPan from any tool
Cmd / Ctrl + scrollZoom
Cmd / Ctrl + +Zoom in
Cmd / Ctrl + -Zoom out
Cmd / Ctrl + 0Reset zoom
Shift + clickAdd a frame to the current selection
EscapeDeselect

​
Board gestures

Pan, zoom, and select work from any tool unless noted. Panning:
  • Trackpad: two-finger drag.
  • Mouse: middle-click-and-drag, or hold spacebar and left-click-drag.
  • Pan tool: click-and-drag with the left mouse button.
Zooming:
  • Trackpad: pinch.
  • Mouse: Ctrl (or Cmd on macOS) + scroll wheel.
  • Keyboard: Cmd/Ctrl + + to zoom in, Cmd/Ctrl + - to zoom out, Cmd/Ctrl + 0 to reset zoom.
Zoom is anchored on the cursor, so the spot under the cursor stays put as the rest of the board scales around it. Selecting:
  • Single frame: click it with the Interact tool.
  • Multi-select: hold Shift and click each frame, or drag a marquee rectangle across the board.
  • Deselect: click an empty area, or press Escape.
Selecting one or more frames surfaces the per-frame action bar and attaches those frames to the next Agent message as snapshots.
  • Canvas — overview and anatomy.
  • Frames — Frame kinds; the per-frame action bar; Reimagine, Refine, Annotate, and Build.
  • Elements — the individual pieces inside a frame.
  • Visual Editor — the element-targeting flow Edit drops you into.