ExperimentLab
Start free
Client SDK

Flags that resolve
in your application.

Use the React SDK to fetch a published manifest, then evaluate flags and experiments locally in the browser. Your components do not wait on a request every time a flag is checked.

Create an account View on GitHub
01 — Install

Install the React SDK

The React package provides ExperimentProvider, useFlag, useExperiment, and useTrack.

npm install experimentlab-react experimentlab-core
02 — Configure

Wrap your application

Create a client API key in Settings → API Keys and pass it to your application. The client key is designed for browser and mobile SDKs; do not use a server key here.

import { ExperimentProvider } from "experimentlab-react";

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ExperimentProvider
      publishableKey={process.env.NEXT_PUBLIC_EXPERIMENTLAB_KEY!}
      baseUrl="https://flags.example.com"
      userId="user_123"
      context={{ plan: "team" }}
    >
      {children}
    </ExperimentProvider>
  );
}
03 — Evaluate and track

Use hooks in your components

The SDK refreshes its manifest in the background. After it has loaded, flags are evaluated in memory using deterministic user bucketing and targeting rules.

import { useFlag, useTrack } from "experimentlab-react";

export function Checkout() {
  const enabled = useFlag("new_checkout");
  const track = useTrack();

  return <button onClick={() => track("checkout_started")}>
    {enabled ? "Use new checkout" : "Continue"}
  </button>;
}

Use the right key for the runtime

Client keys only receive published flags and active/completed experiments. They can be embedded in browser applications. Server keys receive a broader trusted-server manifest and must remain on your backend.

  • Client key for browser and mobile code
  • Server key only for Node.js or backend services
  • Raw organization IDs are never API credentials
Running ExperimentLab on your own infrastructure?Read self-hosting