> ## Documentation Index
> Fetch the complete documentation index at: https://confidence.spotify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript (Web)

> Confidence JavaScript SDK for feature flag evaluation in web browsers.

<Warning>
  **This SDK is being phased out.** For new integrations, we recommend using the [JavaScript Server SDK](/docs/sdks/server/javascript) with local resolve, which provides better performance and reliability. Only use this SDK when client-side context modifications are required that the local resolve SDK cannot support.
</Warning>

The Confidence JavaScript SDK provides feature flag evaluation for web browser applications. Flags resolve once according to the evaluation context, and values read from a local cache for fast access.

## Features

* **Local caching**: Flag values cached locally for instant access
* **OpenFeature compatible**: Standard feature flag API through OpenFeature provider
* **Automatic apply events**: Tracks flag usage
* **Managed context**: Optional visitor ID and page context
* **Event tracking**: Built-in analytics event tracking

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @spotify-confidence/sdk
  ```

  ```bash yarn theme={null}
  yarn add @spotify-confidence/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @spotify-confidence/sdk
  ```
</CodeGroup>

## Quickstart

```javascript theme={null}
import { Confidence } from '@spotify-confidence/sdk';

// Initialize Confidence
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
});

// Set the evaluation context
confidence.setContext({
  targeting_key: 'user-123',
  country: 'US',
});

// Subscribe to flag updates and evaluate
await confidence.activate();

// Evaluate a flag
const value = confidence.getFlag('my-feature-flag', false);
console.log('Flag value:', value);
```

### With OpenFeature

```javascript theme={null}
import { OpenFeature } from '@openfeature/web-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

// Create and register the provider
const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
});

await OpenFeature.setProviderAndWait(provider);
const client = OpenFeature.getClient();

// Evaluate a flag
const value = client.getBooleanValue('my-feature-flag', false);
```

## React Integration

<Warning>
  **The standalone React SDK is being phased out.** For new React integrations, we recommend using the [JavaScript Server SDK](/docs/sdks/server/javascript) with local resolve and its React hooks, which provides better performance and reliability.
</Warning>

The Confidence React SDK provides React hooks and components for feature flag evaluation. Built on top of the JavaScript SDK, it offers a React-native developer experience.

### Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @spotify-confidence/sdk @spotify-confidence/react
  ```

  ```bash yarn theme={null}
  yarn add @spotify-confidence/sdk @spotify-confidence/react
  ```

  ```bash pnpm theme={null}
  pnpm add @spotify-confidence/sdk @spotify-confidence/react
  ```
</CodeGroup>

### Usage with Confidence SDK

```tsx theme={null}
import { Confidence } from '@spotify-confidence/sdk';
import { ConfidenceProvider, useFlag } from '@spotify-confidence/react';

// Initialize Confidence
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
});

// Set initial context
confidence.setContext({
  targeting_key: 'user-123',
  country: 'US',
});

// Wrap your app with the provider
function App() {
  return (
    <ConfidenceProvider confidence={confidence}>
      <MyComponent />
    </ConfidenceProvider>
  );
}

// Use flags in components
function MyComponent() {
  const showNewFeature = useFlag('my-feature-flag', false);

  return (
    <div>
      {showNewFeature ? <NewFeature /> : <OldFeature />}
    </div>
  );
}
```

### Usage with OpenFeature

```tsx theme={null}
import { OpenFeatureProvider, useFlag } from '@openfeature/react-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
});

function App() {
  return (
    <OpenFeatureProvider provider={provider}>
      <MyComponent />
    </OpenFeatureProvider>
  );
}

function MyComponent() {
  const { value: showNewFeature } = useFlag('my-feature-flag', false);

  return (
    <div>
      {showNewFeature ? <NewFeature /> : <OldFeature />}
    </div>
  );
}
```

## Resources

<CardGroup cols={2}>
  <Card title="GitHub repository" icon="github" href="https://github.com/spotify/confidence-sdk-js">
    Source code, examples, and full documentation
  </Card>

  <Card title="OpenFeature Web SDK" icon="flag" href="https://openfeature.dev/docs/reference/technologies/client/web">
    OpenFeature documentation
  </Card>

  <Card title="OpenFeature React SDK" icon="react" href="https://openfeature.dev/docs/reference/technologies/client/web/react">
    OpenFeature React documentation
  </Card>

  <Card title="Context" icon="sliders" href="/docs/sdks/context">
    Configure evaluation context
  </Card>
</CardGroup>