LaunchDarkly developer toolbar
Overview
This topic describes how to install and use the LaunchDarkly developer toolbar. You can install and configure the toolbar directly in your codebase, and use it in your browser during local development.
The toolbar lets you:
- View a list of feature flags in use for your project, and easily override values locally to test application behavior for flag variations
- Listen to incoming events, including flag evaluation events
- Easily identify missing feature flags and link to your LaunchDarkly project so you can create them

Prerequisites
To begin using the developer toolbar, you need:
Installation
You can install the developer toolbar using React or using a CDN. In either method, it should be used only in a local dev environment. Be sure that you do not render it in hosted or production environments.
Install using React
If you develop your front end using React, the @launchdarkly/toolbar package provides a React hook to configure and lazily-load the developer toolbar.
Depending on your package manager, install the package using one of the following methods:
After you install the package, navigate to the area of your application where you instantiate your LaunchDarkly React client. The developer toolbar uses two plugins to power its functionality, and those plugins also need to be passed into the LaunchDarkly React client.
To do this:
Install using a CDN
If you are not using React as your front-end framework, or want to use the developer toolbar in a way where it is decoupled from your tech stack and its dependencies, you can also instantiate the toolbar using a CDN.
To do so, add this script to your index.html file:
This attaches LaunchDarklyToolbar to your window and exposes an init() method using window.LaunchDarklyToolbar.init() that will lazily load the developer toolbar in the same way the React hook does.
In your corresponding code, wherever you instantiate your LaunchDarkly JavaScript client, pass in the following plugins:
If you are using TypeScript and want type-safety for the window.LaunchDarklyToolbar.init call, you can add a window.d.ts file to the root of your web application with the following:
Mode options
The developer toolbar supports running in two different modes:
- SDK mode: Integrates with your LaunchDarkly SDK for local flag overrides and testing
- Dev server mode: Connects to a LaunchDarkly CLI dev server for flag browsing and real-time updates
SDK mode is the default mode for the toolbar. The toolbar switches to dev server mode only if you provide devServerUrl. Generally, we recommend SDK mode.
Available features by mode
Set up SDK mode
SDK mode integrates directly with your LaunchDarkly client, allowing you to:
- Override flag values locally without affecting other members
- Test different flag variations instantly
- Work offline or with any LaunchDarkly environment
Setup requires the following steps:
- Create a
FlagOverridePlugininstance - (Optional) Create an
EventInterceptionPlugininstance - Pass the plugin into your LaunchDarkly SDK’s plugins array
- Pass the same plugin instance into the
LaunchDarklyToolbarcomponent - Wrap your app with the
LDProvider
Here’s how to set up SDK mode:
Set up dev server mode
If your team uses the LaunchDarkly CLI dev server, start it with CORS enabled:
Then connect the toolbar by passing in the URL of the CLI dev server:
Properties
You can set the following properties to personalize the toolbar.
Flag override plugin
The flag override plugin enables flag overrides and testing:
Event interception plugin
The event interception plugin enables Events tab functionality:
Base LaunchDarkly URL
You can use the base LaunchDarkly URL for link generation, such as to create a missing feature flag:
LaunchDarkly dev server URL
You can use the URL of your LaunchDarkly dev server to enable dev server mode:
Toolbar position
You can set the toolbar position on your screen:
Project key
You can use a project key in multi-project setups (dev server mode only):
Polling interval
You can set the polling interval for dev server updates (dev server mode only):
Visibility control
The toolbar provides a global API for show/hide control: