\n\n\n[OpenFeature](https://openfeature.dev) is an open specification that provides a vendor-agnostic, community-driven API for feature flagging that works with your favorite feature flag management tool or in-house solution.\n\n\n\n## 🚀 Quick start\n\n### Requirements\n\n- ES2015-compatible web browser (Chrome, Edge, Firefox, etc)\n\n### Install\n\n#### npm\n\n```sh\nnpm install --save @openfeature/web-sdk\n```\n\n> [!TIP]\n> This SDK is designed to run in the browser. If you're interested in server support, check out the [Node.js SDK](https://openfeature.dev/docs/reference/technologies/server/javascript/).\n\n#### yarn\n\n```sh\n# yarn requires manual installation of the @openfeature/core peer-dependency\nyarn add @openfeature/web-sdk @openfeature/core\n```\n\n> [!NOTE]\n> `@openfeature/core` contains common components used by all OpenFeature JavaScript implementations.\n> Every SDK version has a requirement on a single, specific version of this dependency.\n> For more information, and similar implications on libraries developed with OpenFeature see [considerations when extending](#considerations).\n\n### Usage\n\n```ts\nimport { OpenFeature } from '@openfeature/web-sdk';\n\n// Register your feature flag provider\ntry {\n await OpenFeature.setProviderAndWait(new YourProviderOfChoice());\n} catch (error) {\n console.error('Failed to initialize provider:', error);\n}\n\n// create a new client\nconst client = OpenFeature.getClient();\n\n// Evaluate your feature flag\nconst v2Enabled = client.getBooleanValue('v2_enabled', false);\n\nif (v2Enabled) {\n console.log('v2 is enabled');\n}\n```\n\n### API Reference\n\nSee [here](https://open-feature.github.io/js-sdk/modules/_openfeature_web_sdk.html) for the complete API documentation.\n\n## 🌟 Features\n\n| Status | Features | Description |\n| ------ | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| ✅ | [Providers](#providers) | Integrate with a commercial, open source, or in-house feature management tool. |\n| ✅ | [Targeting](#targeting-and-context) | Contextually-aware flag evaluation using [evaluation context](https://openfeature.dev/docs/reference/concepts/evaluation-context). |\n| ✅ | [Hooks](#hooks) | Add functionality to various stages of the flag evaluation life-cycle. |\n| ✅ | [Logging](#logging) | Integrate with popular logging packages. |\n| ✅ | [Domains](#domains) | Logically bind clients with providers. |\n| ✅ | [Eventing](#eventing) | React to state changes in the provider or flag management system. |\n| ✅ | [Tracking](#tracking) | Associate user actions with feature flag evaluations, particularly for A/B testing. |\n| ✅ | [Shutdown](#shutdown) | Gracefully clean up a provider during application shutdown. |\n| ✅ | [Extending](#extending) | Extend OpenFeature with custom providers and hooks. |\n| ✅ | [Multi-Provider](#multi-provider) | Combine multiple providers with configurable evaluation strategies. |\n\nImplemented: ✅ | In-progress: ⚠️ | Not implemented yet: ❌\n\n### Providers\n\n[Providers](https://openfeature.dev/docs/reference/concepts/provider) are an abstraction between a flag management system and the OpenFeature SDK.\nLook [here](https://openfeature.dev/ecosystem/?instant_search%5BrefinementList%5D%5Btype%5D%5B0%5D=Provider&instant_search%5BrefinementList%5D%5Bcategory%5D%5B0%5D=Client-side&instant_search%5BrefinementList%5D%5Btechnology%5D%5B0%5D=JavaScript) for a complete list of available providers.\nIf the provider you're looking for hasn't been created yet, see the [develop a provider](#develop-a-provider) section to learn how to build it yourself.\n\nOnce you've added a provider as a dependency, it can be registered with OpenFeature like this:\n\n#### Awaitable\n\nTo register a provider and ensure it is ready before further actions are taken, you can use the `setProviderAndWait` method as shown below:\n\n```ts\ntry {\n await OpenFeature.setProviderAndWait(new MyProvider());\n} catch (error) {\n console.error('Failed to initialize provider:', error);\n}\n```\n\n#### Synchronous\n\nTo register a provider in a synchronous manner, you can use the `setProvider` method as shown below:\n\n```ts\nOpenFeature.setProvider(new MyProvider());\n```\n\nOnce the provider has been registered, the status can be tracked using [events](#eventing).\n\nIn some situations, it may be beneficial to register multiple providers in the same application.\nThis is possible using [domains](#domains), which is covered in more detail below.\n\n#### Multi-Provider\n\nThe Multi-Provider allows you to use multiple underlying providers as sources of flag data for the OpenFeature web SDK. When a flag is being evaluated, the Multi-Provider will consult each underlying provider it is managing in order to determine the final result. Different evaluation strategies can be defined to control which providers get evaluated and which result is used.\n\nThe Multi-Provider is a powerful tool for performing migrations between flag providers, or combining multiple providers into a single feature flagging interface. For example:\n\n- **Migration**: When migrating between two providers, you can run both in parallel under a unified flagging interface. As flags are added to the new provider, the Multi-Provider will automatically find and return them, falling back to the old provider if the new provider does not have the flag.\n- **Multiple Data Sources**: The Multi-Provider allows you to seamlessly combine many sources of flagging data, such as environment variables, local files, database values and SaaS hosted feature management systems.\n\n```ts\nimport { MultiProvider } from '@openfeature/web-sdk';\n\nconst multiProvider = new MultiProvider([{ provider: new ProviderA() }, { provider: new ProviderB() }]);\n\nawait OpenFeature.setProviderAndWait(multiProvider);\n\nconst client = OpenFeature.getClient();\nconsole.log(client.getBooleanDetails('my-flag', false));\n```\n\nBy default, the Multi-Provider will evaluate all underlying providers in order and return the first successful result. If a provider indicates it does not have a flag (FLAG_NOT_FOUND error code), then it will be skipped and the next provider will be evaluated.\n\n##### Evaluation Strategies\n\nThe Multi-Provider comes with three strategies out of the box:\n\n- **FirstMatchStrategy** (default): Evaluates all providers in order and returns the first successful result. Providers that indicate FLAG_NOT_FOUND error will be skipped and the next provider will be evaluated.\n- **FirstSuccessfulStrategy**: Evaluates all providers in order and returns the first successful result. Any error will cause that provider to be skipped.\n- **ComparisonStrategy**: Evaluates all providers sequentially. If every provider returns a successful result with the same value, then that result is returned. Otherwise, the result returned by the configured \"fallback provider\" will be used.\n\n```ts\nimport { MultiProvider, FirstSuccessfulStrategy } from '@openfeature/web-sdk';\n\nconst multiProvider = new MultiProvider(\n [{ provider: new ProviderA() }, { provider: new ProviderB() }],\n new FirstSuccessfulStrategy(),\n);\n```\n\n##### Tracking Support\n\nThe Multi-Provider supports tracking events across multiple providers, allowing you to send analytics events to all configured providers simultaneously:\n\n```ts\n// Tracked events will be sent to all providers by default\nclient.track('user-conversion', {\n value: 99.99,\n currency: 'USD',\n});\n```\n\n### Flag evaluation flow\n\nWhen a new provider is added to OpenFeature client the following process happens:\n\n```mermaid\nsequenceDiagram\n autonumber\n Client-->+Feature Flag Provider: ResolveAll (context)\n Feature Flag Provider-->-Client: Flags values\n```\n\nIn (1) the Client sends a request to the provider backend in order to get all values from all feature flags that it has.\nOnce the provider backend replies (2) the client holds all flag values and therefore the flag evaluation process is synchronous.\n\nIn order to prevent flag evaluations from defaulting while the provider is initializing, it is highly recommended to evaluate flags only after the provider is ready. This can be done using the `setProviderAndWait` method or using the `setProvider` method and listening for the `READY` [event](#eventing).\n\n### Targeting and Context\n\nSometimes, 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.\nIn OpenFeature, we refer to this as [targeting](https://openfeature.dev/specification/glossary#targeting).\nIf the flag management system you're using supports targeting, you can provide the input data using the [evaluation context](https://openfeature.dev/docs/reference/concepts/evaluation-context).\n\n```ts\n// Sets global context during provider registration\nawait OpenFeature.setProvider(new MyProvider(), { origin: document.location.host });\n```\n\nChange context after the provider has been registered using `setContext`.\n\n```ts\n// Set a value to the global context\nawait OpenFeature.setContext({ targetingKey: localStorage.getItem('targetingKey') });\n```\n\nContext is global and setting it is `async`.\nProviders may implement an `onContextChange` method that receives the old and newer contexts.\nGiven a context change, providers can use this method internally to detect if the flag values cached on the client are still valid.\nIf needed, a request will be made to the provider with the new context in order to get the correct flag values.\n\n### Hooks\n\n[Hooks](https://openfeature.dev/docs/reference/concepts/hooks) allow for custom logic to be added at well-defined points of the flag evaluation life-cycle.\nLook [here](https://openfeature.dev/ecosystem/?instant_search%5BrefinementList%5D%5Btype%5D%5B0%5D=Hook&instant_search%5BrefinementList%5D%5Bcategory%5D%5B0%5D=Client-side&instant_search%5BrefinementList%5D%5Btechnology%5D%5B0%5D=JavaScript) for a complete list of available hooks.\nIf the hook you're looking for hasn't been created yet, see the [develop a hook](#develop-a-hook) section to learn how to build it yourself.\n\nOnce you've added a hook as a dependency, it can be registered at the global, client, or flag invocation level.\n\n```ts\nimport { OpenFeature } from '@openfeature/web-sdk';\n\n// add a hook globally, to run on all evaluations\nOpenFeature.addHooks(new ExampleGlobalHook());\n\n// add a hook on this client, to run on all evaluations made by this client\nconst client = OpenFeature.getClient();\nclient.addHooks(new ExampleClientHook());\n\n// add a hook for this evaluation only\nconst boolValue = client.getBooleanValue('bool-flag', false, { hooks: [new ExampleHook()] });\n```\n\n### Logging\n\nThe Web SDK will log warnings and errors to the console by default.\nThis behavior can be overridden by passing a custom logger either globally or per client.\nA custom logger must implement the [Logger interface](../shared/src/logger/logger.ts).\n\n```ts\nimport type { Logger } from '@openfeature/web-sdk';\n\n// The logger can be anything that conforms with the Logger interface\nconst logger: Logger = console;\n\n// Sets a global logger\nOpenFeature.setLogger(logger);\n\n// Sets a client logger\nconst client = OpenFeature.getClient();\nclient.setLogger(logger);\n```\n\n### Domains\n\nClients can be assigned to a domain.\nA domain is a logical identifier which can be used to associate clients with a particular provider.\nIf a domain has no associated provider, the default provider is used.\n\n```ts\nimport { OpenFeature, TypedInMemoryProvider } from '@openfeature/web-sdk';\n\nconst myFlags = {\n v2_enabled: {\n variants: {\n on: true,\n off: false,\n },\n disabled: false,\n defaultVariant: 'on',\n },\n} as const;\n\n// Registering the default provider\nOpenFeature.setProvider(new TypedInMemoryProvider(myFlags));\n// Registering a provider to a domain\nOpenFeature.setProvider('my-domain', new TypedInMemoryProvider(someOtherFlags));\n\n// A Client bound to the default provider\nconst clientWithDefault = OpenFeature.getClient();\n// A Client bound to the TypedInMemoryProvider provider\nconst domainScopedClient = OpenFeature.getClient('my-domain');\n```\n\nDomains can be defined on a provider during registration.\nFor more details, please refer to the [providers](#providers) section.\n\n#### Manage evaluation context for domains\n\nBy default, domain-scoped clients use the global context.\nThis can be overridden by explicitly setting context when registering the provider or by referencing the domain when updating context:\n\n```ts\nOpenFeature.setProvider('my-domain', new NewCachedProvider(), { targetingKey: localStorage.getItem('targetingKey') });\n```\n\nTo change context after the provider has been registered, use `setContext` with a domain:\n\n```ts\nawait OpenFeature.setContext('my-domain', { targetingKey: localStorage.getItem('targetingKey') });\n```\n\nOnce a domain's context has been defined, it will override the global context for all clients bound to the domain.\nContext can be cleared for a domain by calling `OpenFeature.clearContext(\"my-domain\")` or `OpenFeature.clearContexts()` to reset all context.\n\n### Eventing\n\nEvents 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.\nInitialization events (`PROVIDER_READY` on success, `PROVIDER_ERROR` on failure) are dispatched for every provider.\nSome providers support additional events, such as `PROVIDER_CONFIGURATION_CHANGED`.\n\nPlease refer to the documentation of the provider you're using to see what events are supported.\n\n```ts\nimport { OpenFeature, ProviderEvents } from '@openfeature/web-sdk';\n\n// OpenFeature API\nOpenFeature.addHandler(ProviderEvents.Ready, (eventDetails) => {\n console.log(`Ready event from: ${eventDetails?.providerName}:`, eventDetails);\n});\n\n// Specific client\nconst client = OpenFeature.getClient();\nclient.addHandler(ProviderEvents.Error, (eventDetails) => {\n console.log(`Error event from: ${eventDetails?.providerName}:`, eventDetails);\n});\n```\n\n### Tracking\n\nThe tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.\nThis is essential for robust experimentation powered by feature flags.\nFor example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.\n\n```ts\n// flag is evaluated\nclient.getBooleanValue('new-feature', false);\n\n// new feature is used and track function is called recording the usage\nuseNewFeature();\nclient.track('new-feature-used');\n```\n\n### Shutdown\n\nThe OpenFeature API provides a close function to perform a cleanup of all registered providers.\nThis should only be called when your application is in the process of shutting down.\n\n```ts\nimport { OpenFeature } from '@openfeature/web-sdk';\n\nawait OpenFeature.close();\n```\n\n### Type-Safe Flag Keys\n\nFor enhanced type safety and autocompletion, you can override flag key types using TypeScript module augmentation. See the [`@openfeature/core` README](../shared/README.md#type-safe-flag-keys) for details.\n\n## Extending\n\n### Develop a provider\n\nTo develop a provider, you need to create a new project and include the OpenFeature SDK as a dependency.\nThis can be a new repository or included in [the existing contrib repository](https://github.com/open-feature/js-sdk-contrib) available under the OpenFeature organization.\nYou’ll then need to write the provider by implementing the [Provider interface](./src/provider/provider.ts) exported by the OpenFeature SDK.\n\n```ts\nimport {\n AnyProviderEvent,\n EvaluationContext,\n Hook,\n JsonValue,\n Logger,\n Provider,\n ProviderEventEmitter,\n ResolutionDetails,\n} from '@openfeature/web-sdk';\n\n// implement the provider interface\nclass MyProvider implements Provider {\n // Adds runtime validation that the provider is used with the expected SDK\n public readonly runsOn = 'client';\n readonly metadata = {\n name: 'My Provider',\n } as const;\n // Optional provider managed hooks\n hooks?: Hook[];\n resolveBooleanEvaluation(\n flagKey: string,\n defaultValue: boolean,\n context: EvaluationContext,\n logger: Logger,\n ): ResolutionDetails {\n // code to evaluate a boolean\n }\n resolveStringEvaluation(\n flagKey: string,\n defaultValue: string,\n context: EvaluationContext,\n logger: Logger,\n ): ResolutionDetails {\n // code to evaluate a string\n }\n resolveNumberEvaluation(\n flagKey: string,\n defaultValue: number,\n context: EvaluationContext,\n logger: Logger,\n ): ResolutionDetails {\n // code to evaluate a number\n }\n resolveObjectEvaluation(\n flagKey: string,\n defaultValue: T,\n context: EvaluationContext,\n logger: Logger,\n ): ResolutionDetails {\n // code to evaluate an object\n }\n\n onContextChange?(oldContext: EvaluationContext, newContext: EvaluationContext): Promise {\n // reconcile the provider's cached flags, if applicable\n }\n\n // implement with \"new OpenFeatureEventEmitter()\", and use \"emit()\" to emit events\n events?: ProviderEventEmitter | undefined;\n\n initialize?(context?: EvaluationContext | undefined): Promise {\n // code to initialize your provider\n }\n onClose?(): Promise {\n // code to shut down your provider\n }\n}\n```\n\n> Built a new provider? [Let us know](https://github.com/open-feature/openfeature.dev/issues/new?assignees=&labels=provider&projects=&template=document-provider.yaml&title=%5BProvider%5D%3A+) so we can add it to the docs!\n\n### Develop a hook\n\nTo develop a hook, you need to create a new project and include the OpenFeature SDK as a dependency.\nThis can be a new repository or included in [the existing contrib repository](https://github.com/open-feature/js-sdk-contrib) available under the OpenFeature organization.\nImplement your own hook by conforming to the [Hook interface](../shared/src/hooks/hook.ts).\n\n```ts\nimport type { Hook, HookContext, EvaluationDetails, FlagValue } from '@openfeature/web-sdk';\n\nexport class MyHook implements Hook {\n after(hookContext: HookContext, evaluationDetails: EvaluationDetails) {\n // code that runs after flag values are successfully resolved from the provider\n }\n}\n```\n\n> Built a new hook? [Let us know](https://github.com/open-feature/openfeature.dev/issues/new?assignees=&labels=hook&projects=&template=document-hook.yaml&title=%5BHook%5D%3A+) so we can add it to the docs!\n\n### Considerations\n\nWhen developing a library based on OpenFeature components, it's important to list the `@openfeature/web-sdk` as a `peerDependency` of your package.\nThis is a general best-practice when developing JavaScript libraries that have dependencies in common with their consuming application.\nFailing to do this can result in multiple copies of the OpenFeature SDK in the consumer, which can lead to type errors, and broken singleton behavior.\nThe `@openfeature/core` package itself follows this pattern: the `@openfeature/web-sdk` has a peer dependency on `@openfeature/core`, and uses whatever copy of that module the consumer has installed (note that NPM installs peers automatically unless `--legacy-peer-deps` is set, while yarn does not, and PNPM does so based on its configuration).\nWhen developing such libraries, it's NOT necessary to add a `peerDependency` on `@openfeature/core`, since the `@openfeature/web-sdk` establishes that dependency itself transitively.\n","readmeFilename":"README.md"}
![\"OpenFeature](\"https://raw.githubusercontent.com/open-feature/community/0e23508c163a6a1ac8c0ced3e4bd78faafe627c7/assets/logo/horizontal/white/openfeature-horizontal-white.svg\"){kind=logo}
\n ![\"Specification\"](\"https://img.shields.io/static/v1?label=specification&message=v0.8.0&color=yellow&style=for-the-badge\")
![\"Release\"](\"https://img.shields.io/static/v1?label=release&message=v1.10.0&color=blue&style=for-the-badge\")
![\"API](\"https://img.shields.io/badge/reference-teal?logo=javascript&logoColor=white\"){kind=icon}
![\"NPM](\"https://img.shields.io/npm/dm/%40openfeature%2Fweb-sdk\")
![\"codecov\"](\"https://codecov.io/gh/open-feature/js-sdk/branch/main/graph/badge.svg?token=3DC5XOEHMY\"){kind=icon}
\n \n \n