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. While nothing is selected it shows three tabs across the top:

• Changes: the change list for the current variation, one diff card per edit.
• Accessibility: axe-core findings for the visible page, grouped by severity.
• Layers: the page as a browsable element tree, plus the element search. This is how you select elements that can't be clicked on the page.

Selecting an element on the page slides the panel to the Inspector: per-element controls for whatever you have selected: text, typography, colours, spacing, image, hidden, attributes. Deselecting (or the Inspector's back button) slides the tab strip back in, and the Inspector's Reveal in Layers button peeks at the tree without dropping your selection.

Every Inspector section opens automatically the moment you select an element, so the controls you need are already visible instead of hidden behind a click. Advanced, Accessibility, and Copy styles are the three exceptions: they start collapsed since you reach for them less often. Click any section's header to collapse or reopen it yourself; an action that needs a collapsed section (starting an image replace, or starting a Copy style paste) reopens it for you automatically.

The collapse-to-rail button in the panel's header shrinks the panel to a thin icon rail showing the Changes, Accessibility, and Layers icons: click one to expand back to that tab. Press ⌘B (Ctrl+B on Linux/Windows) from anywhere to toggle the rail.

A third panel, AvsB Copilot, opens from the sparkle button in the top bar and docks alongside the Layers and Inspector tabs. Instead of clicking control by control, you describe the change you want in plain English and the copilot proposes editable changes. Access is set once at the organization level; see the Copilot guide for availability details.

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 tag at 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 your file picker straight away, uploads the chosen file, and swaps the image in place. The Media section of the left panel pops open so you can watch the upload and adjust alt text.
• Move / Duplicate: reorder the element among its siblings, or duplicate it in one click (the clone is inserted immediately after the original).
• Hide / Delete: two distinct visibility changes. Hide sets visibility: hidden: the element becomes invisible but keeps its layout space. Delete sets display: none: the element is removed from the layout and the surrounding space collapses. Undo, Reset element, or Clear all restores it.
• ⋯: overflow menu with Inspect parent, Copy selector, and Reset element (drops every staged change on the element and reverts it to its original state).

The selection visuals stay glued to the element. Scroll the canvas and the outline, corner tag, and floating bar move with it; when the element scrolls out of view they hide instead of drifting over the editor chrome, and they reappear the moment it scrolls back in.

Deselecting is just as deliberate: press Esc, click any empty space around the page in the canvas, or use the × close button on the floating bar (labelled Deselect). All three clear the outline, corner tag, and floating bar together.

Multi-select (shift-click)

Hold Shift (or Cmd) 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, font weight, padding, and margin. The padding and margin fields set one uniform value for all four sides (margin accepts negatives), and only the fields you actually touch are applied: leave one blank and it stays as-is on every element. 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.

Apply to all similar elements

Shift-clicking builds a fixed, ad-hoc set. For "change the padding on every card in this grid", there's a faster route that also covers cards added later. When the element you've selected shares a stable class with sibling elements of the same kind, a toggle appears in the panel just below the selector row:

Apply to all N similar elements: where N is a live count of the matching elements. Turning it on:

• highlights every match on the page, so you can verify the set before you edit;
• makes your style edits target all of them as one change: the change card is labelled "· N elements" rather than one row per element;
• keeps working as the page changes: a matching element rendered later (an eleventh card, a new nav item) picks up the same styling for visitors.

If the selector matches more than 50 elements, the editor warns you before you continue: a count that size usually means the shared class is broader than you intended, so double-check the highlighted matches before saving.

Turn the toggle off to go back to editing just the one element; staged edits are rescoped back to it.

Drag to move & reorder

Drag any selected element to a new spot on the page. A thin accent line previews exactly where it will land, above or below the element under your cursor. Drop it among its current siblings to reorder, or drop it under a different parent to move it across containers (for example, pull a button out of the hero and into the footer). The element keeps every other edit you have made to it.

Prefer the keyboard? With an element selected, press Alt + ↑ or Alt + ↓ to nudge it up or down among its siblings. Nudge past the first or last sibling and the element steps out into the parent container, so you can walk an element through the layout one move at a time. Cross-container moves are kept applied for visitors even on single-page apps that re-render the surrounding markup.

Hover & other states

The Inspector's States section holds a state switcher: Default · Hover · Focus · Active · Disabled. Pick a state and the styles you set apply only when the element is in that state, letting you restyle a button's hover colour, a link's focus ring, or a disabled control's opacity without touching its resting look. While a non-default state is selected the canvas previews it for you, so you can see the hover treatment without actually hovering.

State styles are delivered to visitors as real CSS rules (a hover style can't be an inline style), so they survive page re-renders the same way your other edits do. States need a CSS-addressable element: if an element can only be matched by its text, the non-default states are disabled with a note explaining why.

Inserting new elements

The element palette lets you add brand-new HTML elements to the page, not just restyle what is already there. With an element selected, open the Inspector's Structure section and click Insert element…: the element palette opens, where you pick a type:

• Heading: inserts an <h2> with placeholder text.
• Paragraph: inserts a <p> ready to type into.
• Button: a styled <button> with placeholder label and no default action.
• Link: an <a>; set its text and link URL in the insert form (the URL defaults to #).
• Image: an <img>; provide the image URL and alt text in the insert form. To upload a file instead, use the rich-text toolbar's Insert image button below.
• Video / Embed: drops in a video: upload a file (MP4, WebM, or Ogg) as a native <video>, or paste a YouTube or Vimeo link and the editor builds the player for you. Uploaded files take an optional poster image.
• List, ordered / unordered: an <ol> or <ul> with one placeholder list item.
• Container: a <div> you can nest other elements into.
• Divider: an <hr> to separate sections.
• Spacer: an empty <div> with a configurable height, giving you vertical breathing room without adding a visible element.
• Text: a bare run of text on its own, without wrapping it in a heading or paragraph, handy for a short inline note or label beside another element.
• HTML: paste your own HTML to drop in a custom block; the markup is sanitised before it lands on the page, so scripts and other unsafe tags are stripped.

For each type you choose a placement relative to the currently selected element: Before or After (as an adjacent sibling), or Inside as its first or last child. The new element appears on the page right away: click it to select and refine it.

Whole sections built by the AvsB Copilot are edited the exact same way: click any part of a copilot-built section on the canvas to select and hand-edit it. There's no separate "AI layer": a built section is an ordinary editable change.

Copy style: paint one element's look onto others

Rather than manually copying typography, colour, spacing, and border values between elements, copy the look once and paint it onto as many elements as you like:

1. Select the element whose look you want to copy.
2. In the Inspector's Copy styles section, tick the style groups to transfer:
   • Typography: font, size, weight, style, line height, letter spacing, alignment, transform.
   • Colours: text and background colour.
   • Spacing: padding, all sides (margins are left alone, since they position the element within its layout).
   • Borders: per-side width, style, colour, and radius.
   • Shadow: box shadow and text shadow.
3. Click Copy style. The editor enters painting mode: a banner appears over the canvas: "Painting styles, click elements to apply. Esc to stop.", and the page cursor switches to a copy cursor.
4. Click any element to paste the copied groups onto it. Each paste is staged as its own STYLE change, one undo step (Cmd+Z), confirmed with a toast, so a mis-click is one undo away. Keep clicking to restyle as many elements as you like. Clicking the element you copied from does nothing; there's nothing to change.
5. Press Esc or click Done on the banner to stop painting. The panel remembers what you copied, so you can click Copy style again to keep painting the same look later.

Fonts, colours & your brand palette

The Typography and Fill & Border sections of the Inspector restyle the selected element directly:

• Font: pick from a curated set of web-safe font stacks (System UI, Helvetica Neue, Georgia, Courier New, and more). These render on every visitor's device with no extra download. Need a specific brand web font? Load it through the variation's custom CSS: the picker deliberately doesn't pull third-party fonts, so nothing slows the page down or silently fails to load.
• Size, weight, style & alignment: set the font size; a weight anywhere from Thin through Black (the full 100-900 range a real font family ships, not just Regular and Bold); italic or normal style; and left / centre / right alignment.
• Text colour & background: set either with the native colour picker or by typing a value.
• Background repeat & attachment: when the background is an image, choose how it tiles (repeat, no repeat, repeat only along one axis, or space/round it to fit) and whether it scrolls with the page or stays fixed in the viewport.

Under each colour control sits your brand palette: a row of saved swatches shared across every experiment in the project. Click a swatch to apply it; click + Save current to add the colour you just chose; hover a swatch and click the × to remove it. Save your brand colours once and reuse them everywhere without re-typing hex codes.

Every one of these (font, size, weight, style, alignment, colour, and highlight) applies to the whole selected element and is delivered to visitors the same resilient way your other edits are, so it survives single-page-app re-renders.

Text wrapping, overflow, and the pointer

A few finishing controls sit at the bottom of the Typography section:

• White space: control how the browser treats spaces and line breaks in the text, wrap normally, never wrap, or preserve the exact spacing you typed.
• Word break: choose whether long unbroken strings (a URL, a SKU) wrap normally, break anywhere they need to, or stay whole and overflow their box.
• Text overflow: when text is clipped by a fixed width, choose a hard clip or an ellipsis (…) to signal there's more text than fits.
• Cursor: pick what pointer shape shows when a visitor hovers the element, pointer for anything clickable, text for an editable field, not-allowed for a disabled control, and more.

Numeric fields: type freely, apply on Enter

Every numeric field in the Inspector (font size, border width, spacing, offsets, animation timing…) treats what you type as a draft:

• Type freely. While the field is focused nothing is applied and nothing is auto-corrected: you can clear it entirely mid-edit without the value snapping back.
• Apply with Enter, or by leaving the field. The value is parsed, kept within the control's allowed range, and applied as one change.
• Cancel with Esc. The field reverts to the last applied value.
• Nudge with ↑ / ↓. Arrow keys step the value by 1 and apply live; hold Shift to step by 10.
• Click to replace. Focusing a field selects the whole value, so typing replaces it, no manual select-all.

An empty or invalid field reverts when you leave it: it never applies 0 by accident. And however much you adjust within one visit to the field, the edit lands as a single undo step.

Layout: size limits, overflow, and flex or grid controls

The Inspector's Layout section covers width and height, and a set of controls that shape how an element sits inside its own layout:

• Min and max width, min and max height: cap how far an element can shrink or grow, independent from its base width and height, useful for a card that should never squeeze below a readable width or a hero image that shouldn't blow up past a certain size.
• Box sizing: choose whether padding and border are counted inside the element's set width and height, or added on top of it.
• Overflow: control what happens when content doesn't fit the element's box, scroll, hide, or spill over. A link toggle next to the field mirrors the one on border width and corner radius: linked applies one behaviour to both the horizontal and vertical axis, unlinked gives you separate X and Y overflow fields for when only one axis should scroll.
• Aspect ratio: lock an element's width-to-height proportion (16 / 9, 1 / 1) so it keeps its shape as the page resizes, without you having to calculate height from width by hand.

When the selected element is a flex container, the Layout section adds flex-wrap (whether children wrap onto new lines when they run out of room) and align-content (how wrapped lines are spaced within the container). When it's a grid container, a grid group appears with a visual track builder: add, remove, and reorder rows and columns, and set each track's sizing as a fraction (1fr), a fixed size (200px), auto, a minmax() range, or free-form text for anything more specific.

Select a child of a flex or grid container and the Layout section adds matching child controls: grow, shrink, and basis for flex children (how eagerly it expands, shrinks, and its starting size), align-self to override the container's alignment for just this one element, and, inside a grid, row and column placement fields to pin it to a specific track.

Border: width, style and colour, one value or per side

The Border control's width field carries a small link toggle:

• Linked (the default while all four sides match): one width applies to all four sides.
• Unlinked: four fields, one per side: top, right, bottom, left. Unlinking seeds each side with the current uniform value; re-linking collapses back to a single width (the top value wins).

Unlink the width and each side also gets its own style (solid, dashed, dotted, double, and more) and colour, so a heavier bottom border or a two-tone frame is a few clicks in the Inspector, no custom code required. Border widths are always set in pixels.

Just below the border block sits a matching Outline control: width, style, and colour for the element's outline, the ring drawn outside the border that doesn't take up layout space. It's the same shape of control as border, without the per-side split, since outlines are almost always drawn evenly on every side.

Corner radius: one value or per corner

The Corner radius control carries the same link toggle as border width:

• Linked (the default while all four corners match): one radius applies to all four corners.
• Unlinked: four fields, one per corner: top left, top right, bottom left, bottom right. Unlinking seeds each corner with its current value; re-linking collapses back to a single radius (the top-left value wins).

Corner radii can be set in px or % using the unit picker next to the field. A percentage radius resolves against the element's own size: that's how you make a perfect circle or pill (50%) that stays round however the element resizes.

Choosing units: px, %, em, rem and more

Many numeric fields carry a small unit picker beside the value. Which units are on offer depends on the property:

• Font size: px, em, rem, %
• Width & height: px, %, vw, vh, rem (keywords like auto still work, just type them)
• Gap: px, %, em, rem
• Position offsets (top / right / bottom / left): px, %, vw, vh
• Corner radius: px, %
• Margin & padding: the box-model fields accept a typed unit directly, e.g. 1.5rem or 5%

Two behaviours to know:

• Typing a bare number applies it in the currently selected unit.
• Switching the unit converts the current value to keep the element looking the same (a 32px font size becomes 2em when the parent's font size is 16px) and applies the converted value as a single undoable change. If a percentage base can't be measured at that moment, the number is kept as-is and only the unit changes.

Border widths, shadow offsets, and blur radii deliberately stay in pixels. If the page authored a shadow in em/rem, the editor shows and applies the equivalent pixel values so editing one field never distorts the others.

Filters, shadows, transforms & transitions

The Inspector's Effects section goes beyond colour and box shadow into how an element looks and moves:

• Filters: five sliders (brightness, contrast, saturation, grayscale, hue rotate) plus a blur slider let you adjust an element's whole visual treatment, wash out a photo, push a background toward black and white, without touching the source image.
• Text shadow: add a soft shadow behind an element's text, with X and Y offset, blur, and colour fields, kept separate from the box shadow that shadows the whole element.
• Transform: move, rotate, scale, and skew the element in place. These are purely visual: the element still occupies its original spot in the layout, so nothing around it shifts when you nudge it.
• Transition: choose which property animates, plus its duration, delay, and easing curve, so a staged change (a hover colour, a shown state) eases in smoothly instead of snapping.

Replacing images

Select an <img> and the Inspector's image section shows a live preview alongside the source URL, alt text, and the Replace dropzone. Two behaviours matter on modern sites:

• The preview shows the image the browser is actually displaying. Responsive images (srcset, <picture>) and lazy-loaded images often leave the plain src attribute empty or pointing at a placeholder: the editor reads the rendered source instead, so the preview matches what's on the page. If an image genuinely can't be previewed, the thumbnail shows a neutral "Preview unavailable" placeholder rather than a broken-image icon.
• Replace wins over responsive sources. When you replace an image, the editor also neutralises the element's srcset and sizes, any parent <picture> sources, and common lazy-loading attributes, otherwise the page's responsive machinery would quietly swap the old image back at some screen sizes. This happens only on images you actually replace; untouched images are never modified.

If a replacement you uploaded refuses to render, the site's security policy may be blocking images from A vs B's asset host: the editor tells you when that's the likely cause. See troubleshooting for the fix.

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.

Text editing is offered only on genuine text elements (a heading, paragraph, link, or button whose text sits directly in the element or inside inline tags like <strong> or <a>). Select a container (a section, hero, or card that holds other blocks) and the Content section shows a short hint instead: "This is a container. Select the heading, paragraph, or button inside it to edit its text." Pick the actual text element inside it, and the editing controls appear. This is deliberate: typing into a container would replace all of its nested blocks with one line of plain text and flatten the layout.

Select a word with the mouse or with Shift+arrow keys and a small dark toolbar pops above the selection with B, I, U, an Aa typography menu (font, size, weight, alignment), a 🎨 colour menu (text or highlight, backed by your saved brand palette), Link, Code, an Insert image button, and Clear-formatting buttons. The typography and colour menus restyle the whole element you're editing.

• 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.
• Insert image opens a one-step upload form so you can place an image immediately adjacent to the text element you are editing, no need to leave rich-text mode and use the element palette separately. The uploaded file goes through the same R2 flow as other image edits, and the resulting <img> lands as a sibling element next to the one you are currently editing. Select it afterwards to set alt text or adjust its dimensions in the Inspector.
• 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.

Saved changes & local drafts

Opening the editor loads the variation's saved changes from the server and applies them to the page: the same count you see on the dashboard's variation card. You always pick up from what's actually saved, then edit on top of it. (Each editor session works on the one variation you launched; open a different variation from the dashboard to edit it.)

Local drafts cover the unsaved layer. 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.

If the editor finds a local draft that is newer than the saved changes (say the browser crashed before you saved), a toast offers the recovered draft, with a Discard action in case you didn't mean to keep it. A stale draft that merely restates what's already saved is discarded silently. Save also clears the draft, because the work now lives on the server.

Saves can't wipe saved work

A save can only remove saved changes when you explicitly asked for that:

• Clearing every change goes through the Clear all button at the top of the changes list, which asks for confirmation first ("Discard all changes?"). Saving after that confirmed clear is what empties the variation on the server.
• If the editor ever fails to load a variation's saved changes (a flaky connection at launch), saving is paused rather than allowed to overwrite them: you'll see "Couldn't load this variation's saved changes, saving is paused to protect them. Reload the editor." The server independently rejects any empty save that doesn't carry an explicit clear-all confirmation, so an accidentally-empty editor can never wipe your work.

The bottom strip

Across the bottom of the editor sits a thin status strip. On the left, a clickable breadcrumb shows 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 top-bar Preview button) to enter preview-as-visitor mode. Every editor chrome surface unmounts (the top bar, the side panel, the bottom strip, 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. Entering preview clears the element selection so you see the clean page with nothing overlaid; it isn't restored on exit, so reselect when you're back. In-flight drafts, the modal stack, and the active toast queue all survive the round trip. The same applies to Compare mode: entering it drops the selection first.

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.
• Entrance animation: fade, slide, or scale an element in when a visitor first sees it.
• 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.