Visual editor overview

Click any element in the live preview to select, style, move, and edit it directly — no chat message needed.

The visual editor lives right inside your live preview. Click any element — a heading, a button, an image, a whole section — and edit it directly: change its text, style, position, or hand it to the AI with full context. For precise tweaks it's faster than describing the change in chat.

Selecting elements

• Hover over the preview and elements highlight with a blue outline and a label showing what they are (e.g. <div> in Hero).
• Click to select. The element gets a blue outline with a tag badge, and the style panel opens on the right with everything editable about it.
• Escape deselects (so does selecting something else).

Multi-select

Hold Shift (or Cmd/Ctrl) and click more elements to add them to the selection — a +N badge shows how many. Shift-click a selected element to remove it.

• Same type selected (e.g. three paragraphs) → style controls stay available and apply to all of them at once.
• Mixed types (e.g. a heading + an image) → style controls hide; use a chat message to edit them all in one go (see below).

The element tree

Below the tag badge, a tree shows where your element sits — its parent above, its children below.

• Hover a row to highlight that element in the preview.
• Click a row to select it — handy for grabbing a container that's hard to click directly.
• The path to your selected element auto-expands so you always see the context.

Selection + chat = scoped AI edits

A selection isn't just for the style panel — it also scopes your next chat message:

• Select a card, type "make this stand out more" → the AI edits exactly that card.
• Multi-select several elements, type "give all of these the same shadow" → one AI pass edits them all (this is the way to edit mixed-type selections).

The element panel also has its own AI Edit box at the bottom, so you can type the request right where you're working — including / commands with a placement picker (Inside / Replace / Below the selected element).

"Make this unique"

If you click an item that's part of a repeated list (one card in a gallery of five), Genesis tells you, and a Make this unique button appears. Click it to split that one instance out so you can edit it independently of its siblings.

Moving and deleting

• Alt + drag an element to move it within its section — an indicator shows exactly where it will land (above, below, beside, or inside).
• Delete / Backspace removes the selected element (with a confirmation first).
• Open in Code Editor (panel button) jumps to the element's source if you want to see the code.

Quick reference

Action	How
Select	Click in the preview
Deselect	Esc
Multi-select	Shift/Cmd/Ctrl + click
Edit text inline	Double-click the text
Move element	Alt + drag
Delete element	Delete / Backspace (confirms first)
Scoped AI edit	Select, then type in chat

Next: Styling elements →