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.

Every tile on the Canvas is a frame. Frames are what you select, drag, and act on. This page covers the frame kinds, the per-frame action bar that surfaces on selection, and the capabilities you trigger from it — Reimagine, Refine, and Build.
Two frames laid out on Canvas: a Website artifact (Velocity — Supercar Rental) on the left and a Design mockup (Velocity — Home (Mockup)) on the right.

​
Frame kinds

The two main kinds are Artifacts (live, app-backed surfaces) and Designs (mockups). The frame’s top-left header shows which kind it is.
KindHeader labelBacked byInteract like a live app?Convert to a real app?
ArtifactWebsite, Slides, etc.A running artifactYesAlready an app.
Mobile artifactMobile appA running artifactYes (in simulator)Already an app.
DesignDesignStatic / interactive mockInteractive frame onlyYes — via the per-frame Build… menu. See Build.
ImageImageGenerated PNG / JPGNoNo — use as a reference.
VideoVideoGenerated videoNoNo.
Vector graphicGraphicGenerated SVGNoNo — embed in a real app.
Whether a Design frame behaves as a static image or an interactive prototype depends on the Interactive frames capability. When it’s enabled, Design frames respond to clicks and form input like a real page; otherwise they render as a snapshot you can iterate on but not click through.

​
Per-frame action bar

Selecting a frame surfaces an action bar. The actions depend on the frame’s kind.

​
Artifact and Design frames

For Artifact (Website, Slides, etc.) and Design frames, the action bar runs across the top of the frame.
Canvas with a Velocity Website frame selected, showing the per-frame action bar across the top with the kind label and Preview button, and three Reimagine-generated Design variants laid out below it.
The action cluster compresses to icons at narrow widths and reveals labels as the frame gets wider. The full set, in left-to-right order:
ActionWhat it does
ReimagineOpens the Reimagine menu to generate variants of the current frame.
Build…Opens a menu listing every Artifact in the project — choose one to apply the design to it, or choose Build this design to create a new Artifact. Design frames only. See Build.
PreviewEnters focus mode on the frame and locks it as the main preview pane. Toggles to Back to Canvas while focused.
InspectOpens the Visual Editor targeting an element inside the frame. Only visible while the frame is in focus mode and contains a selectable element.
Selecting a frame also attaches it to the next Agent chat message as a snapshot — see the Canvas overview.
The action bar respects Read-only mode. When Canvas is locked inside a background-task context, the iteration actions hide and only Preview remains.

​
Media frames

Image, Video, and Vector graphic frames show a small floating action bar above the frame with three controls:
A selected Video frame on Canvas (close-up of a blue Lamborghini) with a small floating action bar above it showing three controls: Replace media (upload arrow icon), Download (down-arrow into a tray), and Alt text (ALT badge).
  • Replace media: upload a new file to swap into the frame, keeping its position and size on Canvas.
  • Download: save the media file to your computer.
  • Alt text: add alternative text for accessibility and so Agent has more context when the frame is referenced.

​
Reimagine

Reimagine generates several alternative versions of an existing frame so you can compare design directions side by side.
Reimagine menu open on a selected Velocity Website frame, with the header 'Reimagine your design' and a list of seven recommended prompts: Explore different approaches, Try different layouts, Explore different vibes, More like this but better, Optimize for usability, Show me the opposite of this, Surprise me — plus a free-form 'Something else…' input at the bottom.
Selecting Reimagine opens a popover anchored to the frame with seven preset directions. Each preset is paired with a tuned prompt and a variant count.
PresetVariantsBest for
Explore different approaches4Fundamentally different concepts — vary the IA and interaction model.
Try different layouts3Same content, different spatial organization and hierarchy.
Explore different vibes3Same layout, different aesthetic and tonal direction.
More like this, but better2Polish the current direction without changing the design opinion.
Optimize for usability3Each variation prioritizes a different usability tradeoff.
Show me the opposite of this2Inverts the dominant design choices to surface hidden assumptions.
Surprise me3Agent picks the most underexplored axis to vary.
The chosen variants land on the Canvas as new Design frames placed alongside the source. The source is left untouched so you can compare.

​
Custom prompts

Below the preset list, the Something else… input takes a free-form prompt. Use it when you have a specific direction in mind — for example, “Generate three versions that emphasize trust and credibility for an enterprise audience.” Custom prompts default to three variants.

​
Refine (inline edits)

Refine is the inline edit loop on a single frame. Select a frame and type your change in the message input that appears below it; Agent rewrites the frame and replaces it in place. There’s no button labeled “Refine” — the inline input is the surface.
A selected Design frame (Velocity — Home (Mockup)) on Canvas with the per-frame action bar visible at the top (Reimagine, Build…, Preview) and the inline Refine input below the frame containing the prompt 'Add Ask AI icon next to the search bar'.
Use Refine when you know what you want to change and don’t need to see several alternatives. Example prompts:
  • “Make the hero image full-width and add a CTA below it”
  • “Switch the navigation to a sidebar layout”
  • “Use a softer color palette — less black, more warm gray”
Unlike Reimagine, Refine modifies the selected frame directly rather than producing variants. If you want to keep the original, duplicate the frame first (right-click → Duplicate).

​
Build

The Build… menu on a selected Design frame graduates the design into a live, running app. The same menu also covers applying the design to an Artifact that already exists.
Build… menu open on a selected Design frame with the header 'Build or apply your designs'. Two sections are visible: 'Create something new…' with a 'Build this design — A new artifact will be created' option, and 'Apply to an existing creation…' listing the project's Website artifact (Velocity — Supercar Rental).

​
Build this design

Picking Build this design in the menu starts a new Artifact from the selected Design frame. The new Artifact lands in the project’s artifact list and becomes a live, running app. Build requires Core or Pro.

​
Apply to an existing Artifact

The Build… menu lists every Artifact in the project. Picking one applies the selected Design’s changes to that Artifact — Agent rewrites the Artifact’s code to match the design, leaving the Design frame on the Canvas for reference.
  • Canvas — overview and anatomy.
  • Toolbar — the floating toolbar; Generate creates new frames.
  • Elements — the individual pieces inside a frame.
  • Visual Editor — element-level edits inside a focused frame.