Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

​
What’s Canvas?

Canvas is the design view of the Project Editor. Agent generates frames representing websites, designs, images, vector graphics, and videos, and lays them out on an infinite board. You can move and resize them, generate variants, and iterate with chat.
The Preview tab in the Project Editor with the Canvas button highlighted and its tooltip open, reading 'Switch to Canvas mode — Canvas lets you design, annotate, and refine all your ideas in one place.'
Click the Canvas button in the top-left of the Preview tab to switch the pane into Canvas mode. To switch the pane back to the live app, click the artifact selector next to the Canvas button and pick the artifact you want to preview.

​
Canvas capabilities

Canvas exposes a small set of capabilities, each surfaced through the toolbar or the per-frame action bar.
  • Generate: create new frames (designs, images, vector graphics, videos) from the toolbar’s Generate menu or from a chat prompt.
  • Refine: apply targeted edits to a frame in place via the inline edit input.
  • Reimagine: produce side-by-side variants of an existing frame using preset directions or a free-form prompt.
  • Build: graduate a Design frame into a live Artifact via the per-frame Build menu.

​
Canvas anatomy

Canvas with three regions labeled: two Frames (a Website artifact on the left, a Design mockup on the right), an Element highlighted inside the Website frame (the hero section), and the floating Toolbar — Chat, Draw, Edit, Generate — at the bottom
Canvas terminology:
  • Canvas: the infinite pan-and-zoom surface that holds every frame, shape, and note.
  • Frames: every tile on Canvas is a frame. The two main types are Artifacts (live, app-backed — the frame header reads Website, Slides, etc.) and Designs (mockups that don’t touch the live app — the frame header reads Design). Other kinds include images, videos, and vector graphics.
  • Elements: the individual pieces inside a frame (text, buttons, images, and other components). Elements are what you select and adjust with the Visual Editor.
  • Toolbar: a floating bar with the Canvas tools. See Toolbar for the full catalog.
Two more components appear in context:
  • Per-frame action bar: surfaces when you select a frame. Exposes Reimagine, Build…, Preview, and Inspect — see Frames.
  • Chat panel: Agent chat docked alongside Canvas. Selecting frames before sending a message attaches them as snapshots so Agent has visual context.
Building a new app from a Design frame requires Core or Pro; every other Canvas capability works on every plan. See Billing for plan details.
Reference
  • Toolbar — full tool catalog, gestures, and selection.
  • Frames — Frame kinds; the per-frame action bar; Reimagine, Refine, Annotate, and Build.
  • Elements — the individual pieces inside a frame.
  • Agent — the Agent that generates and edits frames on Canvas.
Learn