# Visual editor overview

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

Source: https://knowledge.estage.com/visual-editor/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
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 |

:::note
There's no right-click menu, drag-to-resize, or per-element undo. Resize via the **Size**
controls in the style panel; to undo an AI change, just type "undo" in chat; to
duplicate something, ask the AI ("duplicate this section").
:::

Next: [Styling elements →](/visual-editor/styling/)