Skip to main content

OpenFeature Web SDK

Project StatusAPI ReferenceNPM DownloadcodecovCII Best Practices

Quick start


  • ES2015-compatible web browser (Chrome, Edge, Firefox, etc)



npm install --save @openfeature/web-sdk


yarn add @openfeature/web-sdk


import { OpenFeature } from '@openfeature/web-sdk';

// Register your feature flag provider
OpenFeature.setProvider(new YourProviderOfChoice());

// create a new client
const client = OpenFeature.getClient();

// Evaluate your feature flag
const v2Enabled = client.getBooleanValue('v2_enabled', false);

if (v2Enabled) {
console.log("v2 is enabled");

API Reference

See here for the complete API documentation.


ProvidersIntegrate with a commercial, open source, or in-house feature management tool.
TargetingContextually-aware flag evaluation using evaluation context.
HooksAdd functionality to various stages of the flag evaluation life-cycle.
LoggingIntegrate with popular logging packages.
Named clientsUtilize multiple providers in a single application.
EventingReact to state changes in the provider or flag management system.
ShutdownGracefully clean up a provider during application shutdown.
ExtendingExtend OpenFeature with custom providers and hooks.
Implemented: ✅ | In-progress: ⚠️ | Not implemented yet: ❌


Providers are an abstraction between a flag management system and the OpenFeature SDK. Look here for a complete list of available providers. If the provider you're looking for hasn't been created yet, see the develop a provider section to learn how to build it yourself.

Once you've added a provider as a dependency, it can be registered with OpenFeature like this:

OpenFeature.setProvider(new MyProvider())

In some situations, it may be beneficial to register multiple providers in the same application. This is possible using named clients, which is covered in more detail below.


Sometimes, the value of a flag must consider some dynamic criteria about the application or user, such as the user's location, IP, email address, or the server's location. In OpenFeature, we refer to this as targeting. If the flag management system you're using supports targeting, you can provide the input data using the evaluation context.

// Set a value to the global context
await OpenFeature.setContext({ origin: });


Hooks allow for custom logic to be added at well-defined points of the flag evaluation life-cycle Look here for a complete list of available hooks. If the hook you're looking for hasn't been created yet, see the develop a hook section to learn how to build it yourself.

Once you've added a hook as a dependency, it can be registered at the global, client, or flag invocation level.

import { OpenFeature } from "@openfeature/web-sdk";

// add a hook globally, to run on all evaluations
OpenFeature.addHooks(new ExampleGlobalHook());

// add a hook on this client, to run on all evaluations made by this client
const client = OpenFeature.getClient();
client.addHooks(new ExampleClientHook());

// add a hook for this evaluation only
const boolValue = client.getBooleanValue("bool-flag", false, { hooks: [new ExampleHook()]});


The JS SDK will log warnings and errors to the console by default. This behavior can be overridden by passing a custom logger either globally or per client. A custom logger must implement the Logger interface.

import type { Logger } from "@openfeature/web-sdk";

// The logger can be anything that conforms with the Logger interface
const logger: Logger = console;

// Sets a global logger

// Sets a client logger
const client = OpenFeature.getClient();

Named clients

Clients can be given a name. A name is a logical identifier that can be used to associate clients with a particular provider. If a name has no associated provider, the global provider is used.

import { OpenFeature } from "@openfeature/web-sdk";

// Registering the default provider
// Registering a named provider
OpenFeature.setProvider("clientForCache", new NewCachedProvider());

// A Client backed by default provider
const clientWithDefault = OpenFeature.getClient();
// A Client backed by NewCachedProvider
const clientForCache = OpenFeature.getClient("clientForCache");


Events allow you to react to state changes in the provider or underlying flag management system, such as flag definition changes, provider readiness, or error conditions. Initialization events (PROVIDER_READY on success, PROVIDER_ERROR on failure) are dispatched for every provider. Some providers support additional events, such as PROVIDER_CONFIGURATION_CHANGED.

Please refer to the documentation of the provider you're using to see what events are supported.

import { OpenFeature, ProviderEvents } from '@openfeature/web-sdk';

// OpenFeature API
OpenFeature.addHandler(ProviderEvents.Ready, (eventDetails) => {
console.log(`Ready event from: ${eventDetails?.clientName}:`, eventDetails);

// Specific client
const client = OpenFeature.getClient();
client.addHandler(ProviderEvents.Error, (eventDetails) => {
console.log(`Error event from: ${eventDetails?.clientName}:`, eventDetails);


The OpenFeature API provides a close function to perform a cleanup of all registered providers. This should only be called when your application is in the process of shutting down.

import { OpenFeature } from '@openfeature/web-sdk';

await OpenFeature.close()


Develop a provider

To develop a provider, you need to create a new project and include the OpenFeature SDK as a dependency. This can be a new repository or included in the existing contrib repository available under the OpenFeature organization. You’ll then need to write the provider by implementing the Provider interface exported by the OpenFeature SDK.

import { JsonValue, Provider, ResolutionDetails } from '@openfeature/web-sdk';

// implement the provider interface
class MyProvider implements Provider {

readonly metadata = {
name: 'My Provider',
} as const;

// Optional provider managed hooks
hooks?: Hook<FlagValue>[];

resolveBooleanEvaluation(flagKey: string, defaultValue: boolean, context: EvaluationContext, logger: Logger): ResolutionDetails<boolean> {
// code to evaluate a boolean

resolveStringEvaluation(flagKey: string, defaultValue: string, context: EvaluationContext, logger: Logger): ResolutionDetails<string> {
// code to evaluate a string

resolveNumberEvaluation(flagKey: string, defaultValue: number, context: EvaluationContext, logger: Logger): ResolutionDetails<number> {
// code to evaluate a number

resolveObjectEvaluation<T extends JsonValue>(flagKey: string, defaultValue: T, context: EvaluationContext, logger: Logger): ResolutionDetails<T> {
// code to evaluate an object

status?: ProviderStatus | undefined;
events?: OpenFeatureEventEmitter | undefined;

initialize?(context?: EvaluationContext | undefined): Promise<void> {
// code to initialize your provider

onClose?(): Promise<void> {
// code to shut down your provider

Built a new provider? Let us know so we can add it to the docs!

Develop a hook

To develop a hook, you need to create a new project and include the OpenFeature SDK as a dependency. This can be a new repository or included in the existing contrib repository available under the OpenFeature organization. Implement your own hook by conforming to the Hook interface.

import type { Hook, HookContext, EvaluationDetails, FlagValue } from "@openfeature/web-sdk";

export class MyHook implements Hook {
after(hookContext: HookContext, evaluationDetails: EvaluationDetails<FlagValue>) {
// code that runs when there's an error during a flag evaluation

Built a new hook? Let us know so we can add it to the docs!