Editing toolkit

Once the visual editor is open and you can click an element on your page, the editing surface in front of you packs four pieces worth knowing about: the selection visuals, the bulk-edit panel, inline rich-text editing, and local drafts that survive a refresh.

The side panel

The editor's side panel is a single column with two tabs across the top:

Layers — the change list for the current variation plus accessibility findings and the element search.
Inspector — per-element controls for whatever you have selected: text, typography, colours, spacing, image, hidden, attributes.

Selecting an element on the page automatically flips the panel to the Inspector tab so the relevant controls are right there. If you have just clicked the Layers tab and then select an element within five seconds, the panel respects your manual choice and stays on Layers — change selection again after the five-second window and the auto-switch resumes.

Two icon buttons in the panel's header give you control over the chrome itself. The dock-side button swaps the panel between left and right (the choice persists per browser). The collapse-to-rail button shrinks the panel to a thin 48-pixel rail showing the Layers and Inspector icons plus an autosave dot — click either icon to expand back to that tab. Press ⌘B (Ctrl+B on Linux/Windows) from anywhere to toggle the rail.

Selecting elements

Click any element on your page to select it. You will see a 2-pixel blue outline hugging the element, a small dark corner tagat the top-left showing the element's tag (h1, p, a) and a short preview of its text, and a dark floating bar above the element with the most common actions:

Edit text — flips the element into rich-text mode (see below).
Replace image — only visible on <img> elements; opens the Insert form pre-pointed at the image so you can drop a new file.
Move / Duplicate — reorder or clone the element via the existing Inspector reorder + insert flows.
Hide / Delete — both stage a visibility change so the element disappears from the variation. Reset All restores it.
⋯ — overflow menu with Inspect parent, Copy selector, and Reset element.

Multi-select (shift-click)

Hold Shift and click a second element to add it to the selection. The floating popover collapses to a Bulk panel with three options:

Hide all — stages a visibility change for every selected element.
Delete all— same as Hide today; the design distinguishes the two affordances for the marketer's mental model.
Style all — expands an inline form for text colour, background, and font weight. Applying stages one STYLE change per element.

The Inspector hides while multi-select is active — you go back to single-element editing by clicking a single element again or by clicking an empty area to clear.

Inline rich-text editing

Double-click a piece of body text to flip the element into contenteditable mode. The outline shifts to indicate edit mode, and you can type directly into the element.

Select a word with the mouse or with Shift+arrow keys and a small dark toolbar pops above the selection with B, I, U, Link, Code, and Clear-formatting buttons.

Link opens an inline URL input. URLs must start with https://, http://, or mailto:; javascript:, data:, and bare paths are rejected.
Code wraps the selection in a <code> element with the selected text escaped so any markup in your text is rendered as literal characters, not parsed as HTML.
Clear removes inline emphasis (bold, italic, underline). Anchors stay — remove links by deleting the wrapped text directly.

Press Esc to exit rich-text mode, or click anywhere outside the element. The element returns to its regular selected state.

Will overwrite formatting?

If the element you're editing already contains <strong> or <em>markup, the Inspector watches your edits against that markup as you type. The Content section's status pill stays green when every wrapped substring still appears in your new text; it flips amber the moment any wrapped substring would be lost.

When you hit Save and any draft is amber, the editor opens a confirmation modal listing every ambiguous edit with a two-column diff (original markup on the left, your new plain text on the right). Choose Keep editing to dismiss without saving, or Overwrite and save to flatten the markup and commit. The editor will never silently destroy <strong> / <em> markup — you have to consciously confirm.

Local drafts

Every edit is persisted to your browser's local storage as you type. The persistence is keyed by (experiment, variation, your user account)so two users sharing a browser don't see each other's drafts, and so the same draft follows you across tabs in the same browser. Drafts expire after 24 hours.

When you reopen the editor on the same variation within 24 hours, the draft auto-restores and a toast appears in the bottom-right confirming the recovery. The toast carries a Discardaction so you can drop the recovered draft if you didn't mean to keep it; otherwise the toast self-dismisses after a few seconds. Save also clears the draft.

If you have two tabs open on the same variation, the editor detects cross-tab writes within 30 seconds and shows a warning banner — the second tab pauses persisting writes until you refresh. Your in-memory edits are not lost; only the local-disk save pauses.

The bottom strip

Across the bottom of the editor sits a thin status strip. On the left, a clickable breadcrumbshows the selected element's ancestor chain (html › body › section.hero › h1). Click any segment to jump selection to that ancestor; long chains cap at six visible segments with a … collapse in the middle — hover the dots for the full chain.

On the right, a preview-status pill shows the preview-token URL with a Copy link button (clicking writes the URL to your clipboard + confirms with a toast). To the right, an autosave indicator cycles through four states: Unsaved changes (amber), Saving… (blue pulse), Saved just now (green, holds for 3 seconds), then All changes saved (green, steady).

Preview-as-visitor mode

Press Cmd+Shift+P (or click the TopBar Preview button) to enter preview-as-visitor mode. Every editor chrome surface unmounts — the TopBar, LeftPanel, Inspector, BottomBar, every selection outline and floating popover — leaving the customer page rendered as a visitor with the variation cookie would see it.

A small Return to editor pill appears in the bottom-right. Click it (or press Cmd+Shift+P / Esc again) to bring the editor chrome back. Selection, in-flight drafts, the modal stack, and the active toast queue all survive the round trip — preview mode is the absence of editor decorations, not a state reset.

Page is fighting your edit

Some customer pages re-render the element you're editing on every keystroke (a React component bound to local state, for example). When the page wins the race and overwrites your typed text, the editor retries the commit up to three times within 600 milliseconds.

If every retry loses, the editor stops fighting and surfaces a warning toast — "Page is fighting your edit". The Inspector textarea path stays available; saving through there bypasses the page's render cycle entirely, so your edit always sticks.

Next up

Keyboard shortcuts — the full list, with Esc-resolution order and form-input gating.
Selectors — how the editor finds the right element on every load.
Responsive edits — scope changes to mobile, tablet, or custom viewports.
Troubleshooting — when the editor doesn't mount or save fails.