Flaglyby Flipgate

How it works

Ship your first feature flag in under 5 minutes.

What is Flagly?

Flagly lets you create feature flags in this dashboard and read them in any JavaScript app using the flipgate npm package. Toggle a flag here — your app picks up the change within 10 seconds, no code changes or redeployment needed.

Create an account and a project

Each project gets its own API key. You'll find it displayed at the top of the project page and in Project → Settings. It looks like:

flg_abc123def456...

Install the package

React apps (Next.js, Remix, Vite, Gatsby…)

npm install flipgate

Non-React apps (Vue, Svelte, Angular, vanilla JS…)

npm install flipgate-core

Using flipgate-core? Skip to the flipgate-core section below.

Wrap your app with FlaglyProvider (React only)

Add this to your root layout once. Replace the API key with the one from your project.

// app/layout.tsx (Next.js) or your root component
import { FlaglyProvider } from 'flipgate';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <FlaglyProvider apiKey="flg_your_api_key">
          {children}
        </FlaglyProvider>
      </body>
    </html>
  );
}

Create a flag in the dashboard

Open your project and click New flag. Give it a name — the key is auto-generated from it.

Key format: use hyphens, not underscores. new-dashboard → key is new-dashboard. But new_dashboard → key becomes newdashboard (underscores are stripped). You can always hover the key chip in the flag list to see the exact string to use in code.

Use the flag in your code (React)

Option A — Hook (conditionally run logic)

'use client';
import { useFeatureFlag } from 'flipgate';

export default function MyComponent() {
  const { enabled, loading } = useFeatureFlag('new-dashboard');

  // Always handle the loading state to avoid flicker
  if (loading) return null;

  return <p>{enabled ? 'New experience' : 'Classic view'}</p>;
}

Option B — Gate (conditionally render UI)

import { FeatureFlagGate } from 'flipgate';

export default function MyPage() {
  return (
    <FeatureFlagGate flagKey="new-dashboard" fallback={<OldDashboard />}>
      <NewDashboard />
    </FeatureFlagGate>
  );
}

Use Option A when you need the boolean in logic. Use Option B when you just want to swap out a component.

Toggle flags from the dashboard

Flip the toggle next to any flag. Your app picks up the change within 10 seconds — or instantly when the user refocuses the browser tab. No deploy needed.

Using flipgate-core (non-React)

Skip FlaglyProvider entirely — use the client directly in any JS environment.

import { createFlagClient } from 'flipgate-core';

const client = createFlagClient({ apiKey: 'flg_your_api_key' });

// Read a flag value
const enabled = client.getFlag('new-dashboard'); // true | false

// Subscribe to live changes (polling every ~10s)
client.subscribe((flags) => {
  console.log(flags['new-dashboard']); // true or false
});

// Call this when done (e.g. component unmount) to stop polling
client.destroy();

Contentstack Launch Mode

One API key across all 11 Contentstack environments — routing handled automatically via DEPLOY_DOMAIN.

Who this is for: Contentstack engineers deploying microservices across Dev, AWS/Azure/GCP Staging, and production environments.

Go to Project → Settings → Contentstack Launch Mode and toggle it on. You'll verify your @contentstack.com email via a 6-digit OTP, then get a single project-level API key.

import { createFlagClient } from 'flipgate-core';

const client = createFlagClient({
  apiKey: 'flg_cs_your_project_key',  // one key for all envs
  contentstackMode: true,              // reads DEPLOY_DOMAIN automatically
});

The SDK sends DEPLOY_DOMAIN as a header on every request. Flagly maps it to the right environment — Dev, AWS Staging, Azure EU Prod, etc. — and returns that environment's flag states. Each of the 11 environments has independent flag states, so you can roll out to Azure Staging without affecting AWS Staging or any prod environment.

Good to know

—Flags default to false before the first fetch completes. Always handle loading to avoid a flash of the wrong UI.
—The API key is safe to expose client-side — it only grants read access to your flags, not write access.
—One provider per app — put FlaglyProvider at the root layout, not inside individual pages or components.
—Each project has three environments — development, staging, and production each have their own API key. Use the matching key in each environment. Or enable Contentstack Launch Mode for all 11 Contentstack environments with one key.

Ready to get started?

Create a free account and ship your first flag in minutes.

Create account View on npm