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.

An Element is an individual piece inside a frame such as a heading, a button, an image, a form field, or any other component the frame renders. Elements are what you target when you want to change one piece of a frame without regenerating the whole thing.
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.

​
Selecting an element

Use the Edit tool on the toolbar. With Edit active, click inside a live frame to select the element under the cursor. The selected element gets a highlight outline and a small inline prompt where you can ask Agent to change it.
Edit is disabled until at least one frame exists on Canvas, and is desktop-only.

​
Acting on a selected element

​
Ask Agent to change it

Ask agent to update the element’s copy, color, layout, spacing, or behavior with the inline prompt.
Close-up of the inline prompt for a selected element on Canvas: an 'img' chip followed by 'Ask about selected element…' placeholder text and a send button.

​
Inspect element

Inspect the element via the per-frame action bar’s Inspect button, which opens the Visual Editor targeting that element.
A McLaren 765LT detail page in focus mode (labelled 'Preview: Velocity — Supercar Rental' at the bottom-right) with the McLaren image element selected (highlighted in blue with an 'img' chip). The Visual Editor panel is open, showing the Image source path, an Upload Image button, and Layout, Color, and Border sections.
Inspect is only available while the frame is in focus mode and the element is a selectable DOM node.

​
Visual Editor

Selecting an element opens the Visual Editor — a right-side panel paired with the inline prompt. The panel groups every control into clear sections so you can find the one you need faster: Text, Layout, Color, and Border. (The Image section also appears when you select an image element.)
Canvas with a div element selected (the McLaren booking sidebar). The Visual Editor panel on the right shows Text (Font size 16, Font weight Regular, Alignment), Layout (Outer space 0/0, Inner space 20/20 with link toggles, plus a 24px gap), Color (Text #e4e4e7), and Background sections.

​
Layout

The Layout section is where you adjust how children sit inside a container without going through Agent. Select a flex container, expand Layout, and you get:
  • Alignment: A 3×3 dot picker for where items sit along both axes inside the container.
  • Direction: Two arrow buttons that stack children in a row or a column.
  • Gap: A pixel value for the space between items. The icon next to the Gap input changes to match the current direction so you always know whether you’re adjusting horizontal or vertical spacing. Next to it, an arrow icon toggles Distribute space between items, which pushes children to opposite edges of the container.
  • Outer space: Per-side inputs for the space outside the element (one input per side, with a link toggle to lock all four sides at once).
  • Inner space: Inputs for the space inside the element along each axis, with a link toggle for both axes at once.
The Layout section only appears when at least one layout control applies to the selected element. Plain text nodes with no spacing or layout properties hide the section entirely, so the editor stays compact. For the Text, Color, Border, and Image sections, see the Visual Editor guide.
  • Canvas — overview and anatomy.
  • Frames — the containers Elements live inside.
  • Toolbar — where the Edit tool lives.
  • Visual Editor — full element-editing walkthrough.