Start Here

Use this page when you are creating an experiment for the first time. It gives you the shortest path from setup to a bundle you can paste into Adobe Target.

What the framework creates

create-experiment scaffolds a Vite + Preact project for Adobe Target. Each variation builds to a self-contained IIFE bundle in dist/vN/vN.js.

The generated project includes:

• src/config.js for selectors and experiment content.
• src/js/v1/index.jsx as the first variation entry point.
• src/components/* for Preact UI.
• experiment.config.js for package-level tooling config.
• vite.config.js for IIFE bundling, CSS Modules, aliases, and Sass setup.
• biome.json for JavaScript, JSX, and JSON linting and formatting.
• Optional e2e/ Playwright tests when E2E is enabled during scaffolding.

Requirements

Use Node and pnpm from the generated project:

nvm use
pnpm --version

Generated projects include .nvmrc and require pnpm 10+. Run nvm use before installing or building.

Create a project

Run the scaffold command with a project name:

npx create-experiment my-experiment
cd my-experiment
nvm use

For a first project, use these prompt choices:

Prompt	First-project choice	Why
Boilerplate	minimal	Smallest generated project and easiest to understand.
Variations	1	Keeps the first build focused on v1.
Window namespace	sgd	Default global namespace.
Emergency brake	Yes	Preserves the scaffolded setting. Confirm your deployment integration consumes it.
E2E testing	No	Add Playwright after the core loop is working.

Use product-card when the experiment needs Samsung product data, product images, prices, or CTA URLs.

First bundle

Start the watcher for variation 1:

pnpm start 0

The command index maps to the variation folder:

Command	Folder	Bundle
pnpm start 0	src/js/v1	dist/v1/v1.js
pnpm start 1	src/js/v2	dist/v2/v2.js

When the watcher builds, it copies the IIFE bundle to your clipboard. Paste it into Adobe Target custom code for the matching variation.

First edit

Open src/config.js and replace the placeholder selector with the target element on the page:

export const selectors = {
    primary: '.target-selector',
    fallbacks: ['.alternate-selector', 'body'],
};

Keep selectors ordered from most specific to broadest. Save the file, let the watcher rebuild, then paste the updated clipboard bundle into Adobe Target.

First production build

Run:

pnpm build

The production build runs the Biome lint gate first. If lint passes, every variation builds to dist/vN/vN.js.

The build also lowers JavaScript template literals and rejects emitted ${ sequences that Adobe Target could interpret as offer placeholders.

Next

• Build an Experiment explains the files you edit.
• Run and Ship explains watch mode, live injection, builds, and variations.
• Testing explains optional Playwright setup.