Skip to main content
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.
The Edit tool active on a supercar rental website with a div element selected, and the Visual Editor panel showing Text, Layout, Color, and Border 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.

​
Swap an image directly

Select an image element and the Visual Editor’s Image section shows the source path with an Upload Image button, so you can swap the file without writing a prompt.
A McLaren 765LT detail page in a Website frame 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.

​
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 with a 24px bottom value, Inner space 20/20 with link toggles), and Color (Text #e4e4e7, Background #0f0f12) 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.