Reference
2 min read

Feature Flags

View and override your application's feature flags from the Vercel Toolbar
Table of Contents

Feature flags are available in Beta on all plans

Feature flags modal.
Feature flags modal.

Using the Vercel Toolbar, you're able to view and override feature flags for your application without leaving your browser tab. Compatible with any feature flag provider including LaunchDarkly, Optimizely, Statsig, Hypertune, and Split. The feature will also work with custom feature flag setups.

The feature flags dialog shows a list of all flags that your team has enabled through supporting feature flags.

Anyone who is a team member can access the feature flags dialog. Overrides are not persisted and only effect the user applying them. Feature flags are available in all environments including preview deployments and local development.

Feature flags have three main concepts: flag values, flag definitions, and the API Endpoint. If either a feature flag's value or definition is set, the Vercel Toolbar will display that flag.

Flag definitions are metadata for your feature flags.

They communicate:

  • Name
  • URL for where to manage a flag
  • Description
  • Possible values and optional labels for them

See Supporting feature flags for detailed explanations.

A definition can never communicate the value of a flag as they load independently from flag values.

{
  "bannerFlag": {
    "origin": "https://example.com/flag/bannerFlag",
    "description": "Determines whether the banner is shown",
    "options": [
      { "value": true, "label": "on" },
      { "value": false, "label": "off" }
    ]
  }
}

This is how Vercel Toolbar shows flag definitions:

Feature Flag in Vercel Toolbar
Feature Flag in Vercel Toolbar

The actual value that a feature flag resolves to. Tell Vercel Toolbar about the value each feature flag resolved to, and Vercel Toolbar will display the value for convenience. Any JSON-serializable values are supported. Vercel Toolbar combines these values with any definitions if present.

See Supporting feature flags for detailed explanations.

{ "bannerFlag": true, "docsFlag": false }

This is how Vercel Toolbar shows flag values:

Feature Flag in Vercel Toolbar
Feature Flag in Vercel Toolbar

If you have set the FLAGS_SECRET environment variable in your project, Vercel Toolbar will request your application's /.well-known/vercel/flags endpoint. This endpoint should return configuration for the toolbar including the flag definitions.

You must log into the Vercel toolbar to interact with your application's feature flag overrides.

To see and override feature flags for your application:

  1. Select the Feature Flags option () from the Vercel toolbar.
  2. Find the desired feature flag in the modal by scrolling or using the search and filter controls
  3. Select an override value for the desired feature flag
  4. Apply the changes. This will trigger a soft reload. If you have applied changes, the Vercel Toolbar will turn purple
Last updated on May 10, 2024