Skip to main content

Install and Connect the GrowthBook Visual Editor

ProVisual Editor is available on Pro and Enterprise plans.

The GrowthBook Visual Editor is a standalone Chrome extension. Setup is two clicks and about thirty seconds — install the extension, then click Connect with GrowthBook.

1. Install the extension​

Install GrowthBook Visual Editor from the Chrome Web Store (Chrome, Edge, Brave, Dia, and most Chromium browsers).

During beta, the link is emailed after you sign up for early access.

2. Open the side panel​

The GrowthBook Visual Editor Getting Started

Open the extension menu (top right) and choose GrowthBook Visual Editor. The first time you open the side panel, you'll see a Connect with GrowthBook button.

3. Click "Connect with GrowthBook"​

Click Connect with GrowthBook. A new tab opens to GrowthBook:

Connect with GrowthBook button to be signed in
  1. Already signed in, one org — a Visual Editor access key is generated and passed back to the extension automatically. The tab closes; the side panel shows you're connected.
  2. Not signed in — log in first, then the flow continues as above.
  3. Multiple orgs — pick which org to connect to from a dropdown, then the key is generated.

No copying tokens or pasting strings.

Where the key is stored​

The access key is stored in the extension's local storage on your machine. It's not synced across browsers, and it's only sent in the Authorization header of requests to the GrowthBook API host the extension is configured for.

Self-hosted GrowthBook​

Self-hosted GrowthBook Visual Editor support is coming soon.

The one-click flow works on GrowthBook Cloud and self-hosted instances the extension has synced with before. On a fresh install pointing at self-hosted:

  1. Open the gear menu → API host and set your host (e.g. https://api.growthbook.io or https://localhost:3100).
  2. Paste a personal access token (or the equivalent on your instance).
  3. Click Connect with GrowthBook.

Still failing? See Troubleshooting → Extension can't connect.

4. The gear menu​

Once connected, there's a gear icon in the side panel header. Open it for:

  • Status — shows whether the extension is connected and whether the editor is targeting the active tab's domain.
  • Language — change the side panel's language. Independent of your GrowthBook web UI language.
  • Dark mode — toggles the side panel's UI theme. Independent of your GrowthBook web UI theme.
  • Change Connection — change which GrowthBook host you're talking to (e.g., switch from production to staging, or set a self-hosted host) or change the personal access token.
  • Disconnect — clear the stored key and return to the disconnected state. Use this when handing off the browser to someone else.

Next steps​