Create a Canvas
Choose Add artifact → New canvas in the Artifacts panel, or ask an agent:Create a canvas of the checkout flow, with cart, payment, success, and payment failure screens. Match the existing app.Open it from Artifacts. Type @ and choose the canvas under Artifacts to refer to it in a message.
Move Around and Try a Flow
- Pan with Hand (H), or hold Space while dragging.
- Use the zoom percentage menu to zoom in or out, choose a preset, or Fit to screen.
- Use the page picker when the canvas has more than one page of boards.
- Play a board to interact with its buttons and links. A link to another board can take you through the flow. Stop play or press Esc to return to editing.
- Open a board fullscreen for a closer look.
Edit the Boards
In the desktop app, use Select (V) to select and reposition boards and notes. Resize boards to try different screen sizes. Edits are saved with the Task. Select an element inside a board to open its editing panel:- Design: browse Layers, and adjust size, spacing, typography, colours, borders, and visibility.
- Code: change the selected element’s inline CSS.
- Tweaks: adjust controls the board’s author has exposed, such as an accent colour or spacing value.
Comment and Send to Chat
Turn on Comments to leave feedback on an element, selected text, a board, or a point on the canvas. Numbered pins mark threads; select one to reopen the discussion. See Comments. Select an element and use Send to chat to add a reference and visual context to an existing agent chat’s draft. For example, ask the agent to simplify a crowded form or add the missing error state. Nothing is sent until you send the message.Files Behind a Canvas
A canvas is a folder withcanvas.json, board HTML files, and supporting assets. Agents can update those files while you review the boards in Traycer. Your layout, notes, and other canvas changes are saved alongside them.
Related
- HTML artifacts for a single interactive page or report.
- Comments for reviewing and resolving feedback.