LaunchDarkly developer toolbar

The developer toolbar is in beta

Development work on the developer toolbar is ongoing. It is still undergoing testing and active development. Its functionality may change without notice.

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

The "Events" tab in the developer toolbar.

The "Events" tab in the developer toolbar.

Prerequisites

To begin using the developer toolbar, you need:

Installation

Depending on your package manager, install the @launchdarkly/toolbar package using one of the following methods:

$npm install @launchdarkly/toolbar@next

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

ModeOptions
SDK mode

Flag overrides (if you provide flagOverridePlugin)
Events (if you provide eventInterceptionPlugin)
Settings

Dev server mode

Flags
Settings

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:

  1. Create a FlagOverridePlugin instance
  2. (Optional) Create an EventInterceptionPlugin instance
  3. Pass the plugin into your LaunchDarkly SDK’s plugins array
  4. Pass the same plugin instance into the LaunchDarklyToolbar component
  5. Wrap your app with the LDProvider

Here’s how to set up SDK mode:

SDK mode setup
1import { useEffect, useState } from 'react';
2import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
3import {
4 LaunchDarklyToolbar,
5 FlagOverridePlugin,
6 EventInterceptionPlugin
7} from '@launchdarkly/toolbar';
8
9// Create the plugin instances
10const flagOverridePlugin = new FlagOverridePlugin({
11 storageNamespace: 'my-app-overrides', // Optional: customize storage key
12});
13const eventInterceptionPlugin = new EventInterceptionPlugin({
14 eventCapacity: 250, // Maximum events to store (default: 150)
15 enableLogging: true, // Console logging for debugging (default: false)
16});
17
18function App() {
19 const [LDProvider, setLDProvider] = useState(null);
20
21 useEffect(() => {
22 const initializeLD = async () => {
23 const Provider = await asyncWithLDProvider({
24 clientSideID: 'enter-your-client-side-id',
25 context: { key: 'context-key-123abc', name: 'Sandy Smith' },
26 options: {
27 // Pass the plugins to the SDK
28 plugins: [flagOverridePlugin, eventInterceptionPlugin],
29 },
30 });
31 setLDProvider(() => Provider);
32 };
33
34 initializeLD();
35 }, []);
36
37 if (!LDProvider) {
38 return <div>Loading LaunchDarkly...</div>;
39 }
40
41 return (
42 <LDProvider>
43 <div>
44 <h1>My App</h1>
45 {/* Pass the same plugin instances to the toolbar */}
46 <LaunchDarklyToolbar
47 flagOverridePlugin={flagOverridePlugin}
48 eventInterceptionPlugin={eventInterceptionPlugin}
49 />
50 </div>
51 </LDProvider>
52 );
53}

Set up dev server mode

If your team uses the LaunchDarkly CLI dev server, start it with CORS enabled:

Dev server with CORS enabled
$ldcli dev-server start --project your-project --cors-enabled true

Then connect the toolbar by passing in the URL of the CLI dev server:

Connect the toolbar
1import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
2
3function App() {
4 return (
5 <div>
6 <h1>My App</h1>
7 <LaunchDarklyToolbar devServerUrl="http://localhost:8765" />
8 </div>
9 );
10}

Properties

You can set the following properties to personalize the toolbar.

Flag override plugin

The flag override plugin enables flag overrides and testing:

PropTypeDefault
flagOverridePluginIFlagOverridePluginundefined

Event interception plugin

The event interception plugin enables Events tab functionality:

PropTypeDefault
eventInterceptionPluginIEventInterceptionPluginundefined

Base LaunchDarkly URL

You can use the base LaunchDarkly URL for link generation, such as to create a missing feature flag:

PropTypeDefault
baseUrlstring (optional)https://app.launchdarkly.com

LaunchDarkly dev server URL

You can use the URL of your LaunchDarkly dev server to enable dev server mode:

PropTypeDefault
devServerUrlstring (optional)undefined

Toolbar position

You can set the toolbar position on your screen:

PropTypeDefault
position"left" | "right"right

Project key

You can use a project key in multi-project setups (dev server mode only):

PropTypeDefault
projectKeystring (optional)undefined

Polling interval

You can set the polling interval for dev server updates (dev server mode only):

PropTypeDefault
pollIntervalInMsnumber (optional)5000

Visibility control

The toolbar provides a global API for show/hide control:

Visibility control
1// Toggle visibility
2window.ldToolbar.toggle();
3
4// Enable/disable explicitly
5window.ldToolbar.enable();
6window.ldToolbar.disable();
7
8// Check current status
9window.ldToolbar.status(); // returns true/false