Visual Editor
The A vs B Visual Editor lets anyone point and click to edit a page on your site. You don't need to write code. Your edit becomes a variation (one version of the page in your experiment, like the original or a new idea), and it ships without touching your production code.
What it is
The Visual Editor opens right on your live site. Click any element to change its text, attributes, styles, or whether it shows at all. Save your edits and they become a variation. That variation ships through your A vs B snippet, the small script already installed on your site. The snippet applies your edits, live, for every visitor placed into that variation.
You launch the editor from the A vs B dashboard. The snippet already on your page detects the launch and opens the editor as a full workbench around your live page. You don't need a browser extension for this. A Chrome, Firefox, or Edge extension exists as a backup, for pages that don't have the snippet installed yet, or that block the editor from loading. See cross-browser support for install steps.
Launching the editor opens a workbench. Your page renders in a canvas in the middle. Editing chrome frames it on every side: a top bar with the variation pill and device-size buttons, a dockable side panel with the changes list and the per-element editor, and a bottom status strip. A sparkle button opens AvsB Copilot. The page makes room for this chrome rather than sitting underneath it. Hover any element and it gets a faint outline; click it to start editing.
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
Your edits are stored as a compact list of changes, in JSON (a simple data format used to save structured information). When a visitor lands on your site and gets placed into the matching variation, the snippet reads that list. It finds each element using a stable selector chain (a saved way to relocate that exact element, even if the page changes slightly), and applies your edits before the page paints. Read more in the selectors and execution order guides.
Start editing
- Click this button on the variation you want to edit.
Install the A vs B snippet on your site
The editor mounts through the same snippet that runs your experiments. If your site already has the A vs B snippet installed, you're ready: there's nothing else to set up.
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 window with the editor already mounted on that variation. No browser extension, no extra popup, no copy-paste.
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.
If A vs B can't detect the snippet on your site, launching the editor shows a "Snippet not detected" warning. It links to the install guide and offers an Open anyway option, instead of opening to a blank page. Some pages don't have the snippet installed, or they block the editor from loading. For those, install the "AvsB Dev Tools" browser extension and launch the same way: it mounts the editor on pages the snippet can't reach. Install paths for every browser are in cross-browser support.