/Docs

Visual Editor

The A vs B Visual Editor lets non-engineers point-and-click to edit any page on your site and ship the change as an experiment variation — no production code required.

What it is

The Visual Editor is a Chrome, Firefox, and Edge browser extension that opens directly on your live site, lets you click any element to change its text, attributes, styles, or visibility, and then saves those edits as a variation that ships through your A vs B snippet. The snippet applies the edits at runtime to the users who are bucketed into the variation.

What you'll see
On any page where the A vs B snippet is installed, opening the extension reveals a floating side panel with an element picker, an edit form, a code preview, and Save / Publish controls. The page itself is overlaid with a faint outline whenever you hover over a selectable element.

Who it is for

  • Marketing and growth teams running copy, CTA, and layout tests without engineering involvement.
  • Product managers validating UI hypotheses before committing to a full build.
  • Designers A/B testing different visual treatments of the same component.
  • Optimisation consultants shipping client tests quickly across many sites.

How it works

Edits made in the Visual Editor are stored as a compact JSON change list. When a visitor on your site is bucketed into the matching variation, the snippet runtime walks the change list, resolves each element via a stable selector chain, and applies the modifications before the page paints. Read more in the selectors and execution order guides.

Install and start editing

1

Install the browser extension

Visit your browser's extension store and add "A vs B Dev Tools". Detailed install instructions for each browser live in cross-browser support.
2

Sign in inside the extension

Open the extension popup and sign in with your A vs B account. The extension uses the same credentials as the dashboard.
3

Open your experiment

From the A vs B dashboard, open the experiment you want to edit, scroll to the Variations step, and click Edit with Visual Editor on the variation card. Your site opens in a new tab with the editor already mounted on that variation — no extra popup, no copy-paste.
4

Make a change and save

Click any element to select it, edit its text, styles, or attributes in the editor, then press Save. The change is now part of the variation. For a step-by-step walkthrough see the getting started guide.

Learn more

  • Getting started — your first edit, end to end.
  • Editing toolkit — selection visuals, multi-select, inline rich text, the formatting-overwrite confirm, local drafts, the bottom-bar status strip, and preview-as-visitor mode.
  • Keyboard shortcuts — every shortcut the editor honours, plus Esc resolution order and form-input gating.
  • Selectors — how the editor finds the right element every time.
  • Responsive edits — scope changes to mobile, tablet, or custom viewports.
  • Cross-browser support — install paths for every supported browser.
  • Accessibility — how the editor surfaces a11y issues as you edit.
  • Preview links — share a variation with stakeholders who don't have an account.
  • Troubleshooting — fixes for shadow DOM, iframes, lock conflicts, and more.