Getting Started

Walk through your first visual edit end-to-end — install the extension, sign in, open the dashboard, click Edit with Visual Editor on a variation, change some text, and save.

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.
• You have an experiment in Draft status with at least one variation other than the control. Create one from Creating an Experiment.
• You are using Chrome, Firefox, or Edge. Other browsers can side-load the extension — see cross-browser support.

First-edit walkthrough

The Changes panel

On the left-hand side of the editor you'll see a panel with two tabs: Changes and Accessibility. The Changes tab is where every edit you make appears as a diff card.

• 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 Reset alllink appears at the top right of the panel head. It clears every edit you've made in this session.

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 input above the change list 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

Click 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 tab is open. Switching to the Changes 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 panel

The right-hand Inspector is where you do the actual editing. When you click an element on the page, the panel fills in with everything you can change about it, grouped into sections:

• Element header card— an icon for the element kind (heading, paragraph, link, image, generic), the element's label, its tag in monospace, and a hide-toggle switch on the right. Flip the switch off to stage a hide; flip it back on to drop the change (no orphan row in the Changes panel).
• Content— a textarea for the element's text plus a live character count. Below the textarea you'll see a Suggest variationsbutton — see "AI suggest copy" below.
• Image— surfaces only when you've selected an<img>. Source URL + alt text + a Replace dropzone wired to the same R2 upload flow as the rest of the editor. Background images go through Edit Variation CSS instead.
• Typography — font size in px, weight (400 / 500 / 600 / 700), and a left/center/right segmented align control.
• Appearance— text colour and background colour rows. Each is a swatch + monospace hex input; clicking the input opens your OS's native colour picker.
• Spacing — four padding inputs on a tight grid (T / R / B / L). Margin / border-radius / shadow flow through Edit Variation CSS this cycle.
• Attributes — surfaces for elements where attribute editing matters (links, buttons, images, form inputs). Add or remove attribute rows; an invalid attribute name (leading underscore, spaces, etc.) shakes the input and shows a tooltip.
• Advanced — two buttons. Edit variation CSSopens a textarea modal where you can write CSS scoped to this variation; the server-side allowlist blocks @import and url(javascript:…) patterns at save time. Insert HTML blockopens a side-by-side editor with a sandboxed sanitised preview and a position picker (Above / Inside top / Inside bottom / Below). The two Inside positions are disabled when you've selected a void element like an <img> or <input>.

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) to Claude 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:

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

Next steps

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