Getting Started

Walk through your first visual edit end-to-end: open the dashboard, click Edit with Visual Editor on a variation, change some text, and save. The snippet already on your page launches the editor; no browser extension needed.

Before you begin

• The A vs B snippet is installed on the site you want to test. See Quick install if you need to set this up first. This is what launches the editor: if the snippet isn't on the page, use the browser extension fallback instead.
• You have an experiment in Draft status with at least one variation other than the control. Create one from Creating an Experiment.

First-edit walkthrough

The changes list

The editor's dockable side panel shows three tabs while nothing is selected: Changes: the changes list, where every edit you make appears as a diff card, plus Accessibility (findings, below) and Layers (the page's element tree and the element search). Selecting an element slides the panel to the Inspector: the per-element editor, covered below.

• Each row shows an icon for the kind of edit (text, style, image, hide, etc.), a one-line summary, the selector it targets, and an inline before → after diff for text and style changes.
• Hover any row to reveal a small × on the right: clicking it reverts that edit on that element without touching the rest of your changes.
• Three consecutive text edits on the same headline collapse into one row showing the original copy on the left and your latest copy on the right. A text edit and a colour change on the same element show as two rows.
• When at least one change exists, a Clear all button appears at the top right of the panel head. It asks for confirmation ("Discard all changes?"), then reverts every change in the variation on the page: you can undo it right afterwards, and nothing is removed from the server unless you save the now-empty list.

Experiment context, always visible

Below the change list, the editor surfaces a small read-only block with the experiment's name, audience, primary metric, and traffic split. It's there so you don't have to flip back to the dashboard to remember what you're testing.

Search by tag or text

The search box at the top of the Layers tab searches the visible page. Type a tag name like h1 or button to find every element of that kind. Type a fragment of text (Discovery or Sign up) to find any element whose visible text contains that string. Click any result to jump the selection there without scrolling.

Accessibility findings

Open the Accessibility tab and the editor runs axe-core against the visible page. Findings are grouped by severity (Critical, Serious, Moderate, Minor), with a coloured pill on each row.

• Each row carries a one-line description of the issue and (when available) the selector that triggered it.
• Clicking Open in inspector jumps the selection to the affected element so you can fix it inline.
• The scan re-runs automatically a half-second after you change selection while the findings are open. Switching to the Inspector tab pauses the rescans.
• On a hostile customer page that breaks the scanner, the tab renders a fallback message rather than crashing the editor. Findings reflect the top-frame document: iframe-mode coverage ships in a future session.

The Inspector: every section, one tab

The Inspector tab of the side panel is where you do the actual editing. Click an element on the page and the panel flips to the Inspector, filled with everything you can change about that element. The controls are grouped into collapsible sections (each a header with a chevron you click to open or close), so the panel stays scannable no matter how much an element can be styled. Every section opens automatically for the element you've selected, so the controls you need are already visible; Advanced, Accessibility, and Copy styles are the exceptions and start collapsed, since you reach for them less often. Collapse any section yourself by clicking its header.

At the top, an element header shows an icon for the element kind, the element's label, and its tag, with a Reveal in Layers button that highlights where the element sits in the page tree without dropping your selection.

Below it, the sections you'll see:

• Content: the element's text in a textarea with a live character count, plus a Suggest variations button (see "AI suggest copy" below). Shown for text elements.
• Typography: font, size, the full weight range from Thin to Black, style, alignment, line wrapping, and cursor. See the editing toolkit for the full breakdown.
• Fill & Border: text and background colour (your saved brand palette one click away), per-side border width, style, and colour, an outline, corner radius, and background repeat.
• Effects: box shadow, text shadow, opacity, blur and other filters, transform, and transition.
• Layout: width, height, size limits, box-sizing, overflow, aspect ratio, spacing (margin and padding), gap, and, for flex or grid elements, the matching container and child controls.
• Position: static, relative, sticky, or fixed placement, with offsets and z-index.
• States: style the element's Hover, Focus, Active, or Disabled look, not just its resting one.
• Entrance animation: fade, slide, or scale the element in when a visitor first sees it.
• Media: the image's source, alt text, and a Replace dropzone. Shown when you select an image.
• Structure: hide, remove, duplicate, reorder, or insert an element.
• Advanced: edit the element's attributes, write custom CSS scoped to this element, or insert a sanitised HTML block.
• Accessibility: accessibility checks for the selected element.

Three more sections trail the list: Copy styles (paint one element's look onto others), Interaction (record a click path a visitor must follow to reveal an element), and Scope (choose which pages the change applies on).

AI suggest copy

Below the Content textarea, click Suggest variations and the editor sends the current text plus a small bit of context (the element's tag, the surrounding paragraph, the experiment name) via OpenRouter (our model-routing service, configured for zero data retention) to the AI model serving the request, and gets back three rewrites in distinct tones:

• Urgent: emphasises immediacy, scarcity, action.
• Clear: strips jargon, makes the value-prop unmistakable.
• On-brand: sharpens the source copy's voice without flattening it.

Click any candidate to apply it: the textarea updates, the canvas updates, and a row lands in the Changes panel. Each suggestion is capped to ≈ 30 words and the whole pipeline returns in roughly two seconds.

What gets saved

Each edit is stored as a JSON change with a selector, an action type, and a payload. A simple text change looks roughly like this:

{  "selector": "[data-avsb-target=\"hero-headline\"]",  "action": "text",  "value": "Save 30% on your first order",  "viewport": "ALL"}

Next steps

• Ask AvsB Copilot: describe a change in plain English and get editable proposals, instead of clicking control by control.
• Scope edits to a viewport: make the change only apply on mobile, tablet, or desktop.
• Share a preview link with a stakeholder who doesn't have an A vs B account.
• Review and publish when you're ready to send live traffic.