ConfigDirectorDOCS
Browser SDKs

OpenFeature Web Provider

ConfigDirector Provider for the OpenFeature Web SDK
OpenFeature Web Provider

Introduction

The OpenFeature Web Provider is intended to be used in combination with the OpenFeature Web SDK. All modern web browsers on popular platforms should be supported.

The ConfigDirector OpenFeature Web Provider is tested on the latest versions of Chrome, Firefox, Safari, and Edge.

Telemetry collection within browser SDKs uses Web Workers to aggregate and send telemetry data. If the provider runs on older browsers without Web Workers support, config evaluation will continue to work but no telemetry data will be collected for that session.

Installation

The provider can be installed from NPM: https://www.npmjs.com/package/@configdirector/openfeature-web-provider

npm install --save @openfeature/web-sdk @configdirector/openfeature-web-provider

Configure and initialize the client

  1. Create an instance of the provider using your client SDK key. You can retrieve a client SDK key under your project settings in the Environments & SDK Keys tab.
  2. Set the OpenFeature provider.
  3. Get a client instance from OpenFeature.
import { OpenFeature } from "@openfeature/web-sdk";
import { ConfigDirectorProvider } from "@configdirector/openfeature-web-provider";

const provider = new ConfigDirectorProvider("YOUR-CLIENT-SDK-KEY");
await OpenFeature.setProviderAndWait(provider);
const client = OpenFeature.getClient();

Additional configuration options

Additional configuration options can be passed into the provider in the optional second argument of the constructor.

For example, the metadata can be provided like this:

import { ConfigDirectorProvider } from "@configdirector/openfeature-web-provider";

const provider = new ConfigDirectorProvider("YOUR-CLIENT-SDK-KEY", {
  metadata: {
    appName: "YOUR-APP-NAME",
    appVersion: "1.0.2",
  },
});

The provider accepts the same configuration options as the Javascript SDK client, refer to the additional configuration options section of the Javascript SDK for a full list.

Retrieve config values

To retrieve config values, use the OpenFeature client:

const booleanValue = client.getBooleanValue("my-config-key", false);

const stringValue = client.getStringValue("my-string-config-key", "Default");

For additional information regarding the OpenFeature client refer to the OpenFeature Web SDK documentation.

Update the user context

await OpenFeature.setContext({
  targetingKey: "12345", // In OpenFeature, the `targetingKey` represents the context's user ID
  name: "Example User",
  traits: {
    region: "North America", // Any arbitrary traits which can be referenced in targeting rules
  }
});
In the OpenFeature Web SDK with the ConfigDirector provider, the context's targetingKey will map to ConfigDirector's context id.

For additional information regarding the OpenFeature client refer to the OpenFeature Web SDK documentation.

Vue

Vue SDK

React Native

React Native SDK

Copyright © 2026