/Docs

Local Development

Build and refine experiment variation code on your own machine, in your own IDE, with live preview in a real browser. Edit TypeScript and SCSS files, see changes instantly in Chrome, and push the finished code to the platform when you are ready.

Prerequisites

  • Node.js 18+ — required to run the CLI and compile TypeScript/SCSS.
  • Personal access token — create one in Account Settings → Auth Tokens. See Personal Access Tokens.

Install the CLI

Install the CLI globally using npm:

bash
1npm install -g @avsbhq/cli

Verify by running avsb --version. Then authenticate:

bash
1$ avsb login
2Paste your personal access token: pat_...
3Logged in as jane@example.com (Acme Corp)

Install the Chrome extension

The Chrome extension connects to the CLI dev server and injects your local variation code into the real website. Install it from the Chrome Web Store. If the store listing is not available yet (it is currently under review), you can download the extension zip — unzip it, go to chrome://extensions, enable Developer mode, click Load unpacked, and select the unzipped folder.

After installing, click the puzzle-piece icon in the Chrome toolbar and pin the A vs B extension so it is always visible.

The workflow

1

Clone the experiment

Find the experiment's short ID in the A vs B dashboard (the five or six digit number in the experiments list). Run:
bash
1avsb clone 300015
The CLI asks two questions: JavaScript or TypeScript and CSS or SCSS. A new directory is created with the experiment's name. Navigate into it.
2

Understand the file structure

Cloned experiment structure
text
1.
2├── .avsb.json           ← Manifest: experiment ID, variation IDs, language choice
3├── trigger.ts           ← Page trigger logic (read-only — edit in the platform)
4├── control/
5│   ├── control.ts       ← Control variation code
6│   └── control.scss     ← Control variation styles (usually empty)
7└── variant-a/
8    ├── variant-a.ts     ← Variant A code
9    └── variant-a.scss   ← Variant A styles
Each variation has its own folder with one code file and one stylesheet. If you chose JavaScript and CSS, the extensions will be .js and .css instead.
3

Start the dev server

bash
1avsb dev
This starts a file watcher and a WebSocket server on port 4400. Open Chrome and navigate to the website where the experiment targets. The extension connects to the dev server automatically — the terminal will show Chrome extension connected.
4

Edit and see changes live

Open the experiment folder in your IDE and edit the variation files.
  • CSS/SCSS changes hot-swap instantly — styles are injected without reloading the page.
  • JS/TS changes trigger a full page reload so the new code runs clean.
Use the variation switcher in the extension popup (click the A vs B icon in the toolbar) to switch between variations while previewing.
5

Push to the platform

bash
1avsb push
The CLI compiles TypeScript to JavaScript and SCSS to CSS, then uploads the result. You will be asked to either publish immediately (code goes live) or save as pending (for team review first).

The extension popup

Click the A vs B icon in the Chrome toolbar to open the popup. It shows four things:

  • Connection status — green if connected to a local avsb dev server, grey if not.
  • Active experiment — the experiment matching the current page URL.
  • Variation switcher — click any variation to switch to it immediately.
  • Event log — a live feed of events tracked on the current page (exposures, conversions, revenue).
Snippet detection
Even without a dev server running, the extension detects whether the A vs B snippet is present on the page. The toolbar icon turns coloured when the snippet is found.

How live preview works

The extension receives compiled CSS and JS from the dev server and injects them into the page. It also sets a _avsb_dev cookie that tells the production snippet to skip injection for the experiment being developed locally. Other experiments on the page continue to run normally. When you stop avsb dev, the cookie is cleared on the next page load and the production snippet resumes control.

Conflict detection

If someone edits the variation code in the web editor while you are working locally, avsb push detects the conflict and warns you before overwriting. To pull the remote changes first:

bash
1avsb pull     # fetch latest from platform
2# manually merge any changes
3avsb push     # push your merged version
Pull overwrites local files
Running avsb pullreplaces your local variation files with the platform's version. Back up your changes before pulling.

CLI command reference

avsb login

Authenticates with your personal access token. Stored securely in your system's credential store.

avsb logout

Removes stored credentials. You will need to log in again.

avsb org

Show, list, or switch your active organization.

bash
1avsb org            # show current org
2avsb org list       # list all orgs
3avsb org switch     # switch org

avsb clone <shortId | url>

Download an experiment to a local directory by short ID or URL.

bash
1avsb clone 300015
2avsb clone https://app.avsb.cloud/projects/123/experiments/exp_abc123

avsb dev

Start the file watcher and WebSocket server. Keep it running while you edit. Press Ctrl+C to stop.

avsb status

Show the experiment name, status, and whether local changes are ahead of or behind the platform.

avsb pull

Fetch the latest code from the platform and overwrite local files.

avsb push

Compile and upload local code. Choose to publish or save as pending.

The extension only works in Chrome
The A vs B extension is published for Google Chrome only. For production browser compatibility, the snippet itself supports all modern browsers regardless of which browser you use for development.