Optimizely Tools is an unofficial VS Code extension that lets you push experiment code to Optimizely Web Experimentation without leaving your editor. Annotate any .js, .scss, or .css file with Optimizely project/experiment/variation IDs in the first few lines, then push from the title bar, context menu, or command palette. JavaScript is bundled with esbuild as readable output (targeting browser ES2015), SCSS is compiled to CSS with Dart Sass, and your API token is stored securely in VS Code Secret Storage. Supports both shared experiment code and per-variation code, with automatic page-ID resolution and a confirmation step before every push.

Not affiliated with, endorsed by, or sponsored by Optimizely, Inc.

Features

Push .js, .scss, and .css files from the editor title bar, editor context menu, explorer context menu, or command palette.
Bundle JavaScript with esbuild before pushing (readable output, targeting browser ES2015).
Compile SCSS to CSS with Dart Sass and push the generated CSS.
Push shared experiment JS/CSS or variation JS/CSS.
Store your Optimizely API token securely in VS Code Secret Storage.
Confirm the project, experiment, target, and source file before every push, with a choice to push only or push and publish (action=publish) each time.
Statically validate JavaScript before pushing: identifiers that are referenced but never declared, imported, or recognized as a runtime global are flagged as red error diagnostics (editor squiggles and Problems-panel rows) and surfaced in the push confirmation, catching typos and missing imports. Diagnostics are shown only for Optimizely-targeted files (those declaring an Experiment Id).

Installation

Install Optimizely Tools from the VS Code Marketplace:

In VS Code: open the Extensions view (Cmd/Ctrl+Shift+X), search for Optimizely Tools, and click Install.

Or from the command line:

code --install-extension pushkalmeruga.optimizely-tools

Getting Started

Run Optimizely: Save API Token from the command palette (Cmd/Ctrl+Shift+P) and paste your Optimizely Web Experimentation API token.
Open a .js, .scss, or .css file and add the Optimizely IDs in the first 15 lines (see File Metadata).
Run Push to Optimizely from the editor title bar, right-click menu, or command palette.

To remove a stored token later, run Optimizely: Remove API Token.

File Metadata

Each source file must include Optimizely IDs in the first 15 lines.

// Project Id: 12345
// Experiment Id: 67890
// Variation Id: 111222333

Project Id can be omitted if optimizelyTools.defaultProjectId is set in VS Code settings.

Variation Id is optional. If it is missing, the extension asks which variation to update.

Push Behavior

Shared experiment code:

Does not use a page ID.
Updates experiment-level changes.
Sends the full experiment payload back to Optimizely with updated shared code.

Variation code:

Always resolves a page ID before pushing.
If root page_ids has one page, that page is used automatically.
If root page_ids has multiple pages, the extension asks which page to update.
If root page_ids is not available, page IDs are resolved from variation actions and url_targeting.
Updates the existing actions[] object with the selected page_id.
Creates a new action with { page_id, changes: [...] } when no action exists for the selected page.

Code changes:

.js pushes as custom_code.
.scss and .css push as custom_css.
Existing Optimizely change IDs are removed from PATCH payloads because they are read-only.

Configuration

optimizelyTools.defaultProjectId: default project ID when the file does not include Project Id.
optimizelyTools.apiBaseUrl: Optimizely REST API base URL. Defaults to https://api.optimizely.com.
optimizelyTools.overrideDrafts: adds override_changes=true to the update request.
optimizelyTools.validateBeforePush: statically check compiled JavaScript for likely-undefined references and warn before pushing (default true).
optimizelyTools.knownGlobals: extra global identifiers provided by the page at runtime that validation should not flag as undefined.

API Endpoints

The extension uses Optimizely Web Experimentation REST API v2:

GET /v2/experiments/{experiment_id}
GET /v2/pages/{page_id}
PATCH /v2/experiments/{experiment_id}

Development

These steps are for contributors working on the extension itself. End users do not need them — installing from the Marketplace is enough.

Run from source

Run npm install.
Run npm run package.
Press F5 in VS Code to open an Extension Development Host.
In that window, run Optimizely: Save API Token, then open a file and run Push to Optimizely.

Commands

npm run compile: bundle the extension into dist/extension.js.
npm run watch: rebuild on source changes.
npm run lint: lint the TypeScript source.
npx tsc --noEmit: type-check the extension.

Packaging & publishing

Packaging requires Node 20+ (vsce does not support older versions).

npx vsce package    # build a local .vsix to test
npx vsce publish    # publish to the Marketplace (requires a publisher PAT)

The extension compiles user code at runtime with esbuild-wasm and sass, so those dependencies must ship inside the VSIX. Do not package with --no-dependencies.