Workspace
Using the canvas
View and work on all your app pages at once. Add notes, drawings, and images, collaborate with your team in real time, and send ideas straight to the AI chat.
The canvas turns your preview into an infinite board. Every page of your app appears as a live frame that you can arrange, resize, and annotate. Use it to plan layouts, leave feedback for yourself or your team, sketch ideas, or send instructions straight to the AI chat for implementation. Everything saves automatically as you work.
Open the canvas from the Page and Canvas toggle at the top left of the Preview tab. Your zoom level and position are saved per device, so the canvas reopens where you left off.
Page frames
Every page in your app appears as a frame showing a live preview. Click a frame to select it, then drag to move it or pull the edge handles to resize. The size badge updates as you drag and the device icon reflects the current width. Each frame also has a viewport menu to switch between Desktop, Tablet, and Phone, and you can add extra frames so the same page shows in several sizes side by side.
- Double-click a frame to interact with the live app inside it. Press Escape to leave.
- Right-click a frame and choose Refresh to reload its preview.
- Pages cannot be deleted from the canvas. To remove a page, ask the AI chat.
Tools and shortcuts
| Tool | Shortcut | What it does |
|---|---|---|
| Select | V | Select, move, and resize elements |
| Hand | H | Pan around the canvas without selecting anything |
| Draw | D | Freehand drawing with configurable color and stroke width |
| Sticky note | N | Add sticky notes |
| Image | I | Add images from your computer or by pasting |
Press Escape at any time to return to the Select tool. Zoom with the bottom-right controls or pinch and scroll: Cmd+1 fits everything into view, Cmd+0 resets to 100%.
Sticky notes
Sticky notes are the main way to leave ideas, feedback, and instructions on the canvas. Pick the note tool, click to place the note, then double-click to type. Each note has a status chip (To do, In progress, Done), a color, four font styles, four text sizes, bold, and bullet list formatting.
Send a note to the AI
Once a note has content, a Send to chat button appears. If the note is connected to a page frame with an arrow, the AI applies the change to that specific page; otherwise it decides which page to update from the note content.
Drawings, images, and arrows
- Draw: smooth freehand strokes anywhere on the board. Click an existing drawing to change its color or width, or right-click to flip it.
- Images: upload from your computer or paste from the clipboard. Selected images offer Replace, Crop, and Border options. Connect an image to a page frame and press Send to chat to have the AI restyle that page to match it.
- Arrows: hover any note or image to reveal connection handles, then drag to another element to link them. Select an arrow and press Delete to remove it.
Edit mode
Click Edit in the top-left of the canvas to inspect elements inside any frame. Hovering shows element tags, and selecting an element opens a style toolbar: background and text colors (from your app theme or a custom picker), font family and size, opacity, spacing, and a raw Tailwind class editor for advanced control. Style changes preview instantly and are written back to your source code.
Regenerate and Edit Element
The Regenerate button offers quick directions like Explore different styles or Switch colors, plus a free-text field. Edit Element opens an inline prompt anchored to the selection. Both send the element context to the AI chat.
Collaboration, history, and capture
- Real time: teammates on the canvas appear as named cursors, and colored outlines show what each person has selected.
- Undo and redo cover every canvas action (Cmd+Z, Shift+Cmd+Z). History is personal, so undoing only reverses your own edits, up to 50 steps.
- Lock any note, drawing, or image from the right-click menu (Shift+Cmd+L) to prevent accidental edits.
- Capture: the camera button lets you drag a region of the board, frames and annotations included, and attaches it to the chat composer as an image.
- Export: the download button saves the whole board as an image.
The right-click menu on canvas objects also covers Cut, Copy, Paste, Paste to replace, Duplicate, Bring to front, Send to back, and Flip.