A lightweight, client-side HTML SDK for rendering A/B test variants and sending experiment impressions to analytics. Supports **preview mode**, **shared caching**, and works with any `<variance-experiment>` / `<variance-variant>` setup.
A lightweight, client-side HTML SDK for rendering A/B test variants and sending experiment impressions to analytics. Supports preview mode, shared caching, and works with any
---
- Installation
- Usage
- Basic Example
- Preview Mode
- API
- Attributes
- Methods
---
Install via pnpm:
``bash`
pnpm add @varianceab/html-sdk
Or include directly in your project:
`html`
`html`
Welcome, visitor!
Try our new feature!
- The component fetches the experiment data from the endpoint.
- The correct variant is automatically rendered.
- An analytics impression is sent automatically.
Preview mode allows rendering a specific variant without sending analytics events or fetching experiment data.
`html`
client-id="client_123"
preview-mode="true"
variant-to-preview="var_456"
>
Unseen variant
Previewed variant
- preview-mode="true" requires variant-to-preview to be set.
- No network request is made in preview mode.
- No analytics impressions are sent.
| Attribute | Type | Description |
| -------------------- | ------- | ----------------------------------------------------------------- |
| id | string | The experiment ID. |client-id
| | string | The client ID for fetching experiments. |preview-mode
| | boolean | If true, renders a specific variant for preview purposes. |variant-to-preview
| | string | The variant ID to preview (required when preview-mode is true). |
sendImpression(experimentId: string, variantId: string)` – Sends an analytics event manually. Usually called automatically.
All other rendering is handled automatically; variants are rendered based on experiment data or preview mode.