Quickstart | FeatureFlare Docs

Set up the React provider with a client SDK key, then render your app inside FeatureFlareProvider.

Prerequisites

A valid client key (for example from VITE_FEATUREFLARE_CLIENT_KEY_DEV).
Your React app entry file (for example main.jsx).
Installed package: @featureflare/react.

1) Build the provider config

Define a minimal config with your SDK key and startup behavior:

const sdkKey =
  import.meta.env.VITE_FEATUREFLARE_CLIENT_KEY_DEV ||
  import.meta.env.NEXT_PUBLIC_FEATUREFLARE_CLIENT_KEY_DEV ||
  'featureflare_cli_your_dev_client_key';

const config = {
  sdkKey,
  waitForFlags: true,
};

2) Wrap your app

Render your app within FeatureFlareProvider and provide an initial user identity:

ReactDOM.createRoot(rootEl).render(
  <FeatureFlareProvider
    config={config}
    initialUser={{ id: 'demo-user-001' }}
  >
    <App />
  </FeatureFlareProvider>
);

3) Full example

import React from 'react';
import ReactDOM from 'react-dom/client';
import { FeatureFlareProvider } from '@featureflare/react';
import { App } from './App.jsx';

const rootEl = document.getElementById('app');
if (!rootEl) throw new Error('Missing #app');

const sdkKey =
  import.meta.env.VITE_FEATUREFLARE_CLIENT_KEY_DEV ||
  import.meta.env.NEXT_PUBLIC_FEATUREFLARE_CLIENT_KEY_DEV ||
  'featureflare_cli_your_dev_client_key';

const config = {
  sdkKey,
  waitForFlags: true,
};

ReactDOM.createRoot(rootEl).render(
  <FeatureFlareProvider
    config={config}
    initialUser={{ id: 'demo-user-001' }}
  >
    <App />
  </FeatureFlareProvider>
);

Troubleshooting

If flags do not load, verify the SDK key and environment key mapping.
If render appears blank, remember waitForFlags: true can delay first paint while loading.

Related guides

Projects Console Workflow for creating and opening projects before wiring app integration.
Features Workspace for rollout movement and discovery workflows after initial setup.