Togglebit
Sign in

Personal project · Feature flags for Next.js

Ship code without shipping the risk

Togglebit is a feature flag platform I built to separate deploys from releases. Wrap new logic behind a flag, roll it out gradually, and turn it off instantly when something breaks.

SDK · API · Dashboard · npm install togglebit

Rollout dashboard

checkout-v2

Enabled
Rollout42%

Type

Combined

Env

prod

Rules

plan=pro

What problem does this solve?

Deploying code and releasing a feature are not the same thing. You can merge today and expose the change to 5% of users tomorrow, or keep it off until QA signs off. When a rollout misbehaves, you flip a switch instead of rolling back an entire deploy.

Decouple deploy from release

Merge to main on your schedule. Turn the feature on when you are ready.

Shrink the blast radius

Start with internal users, a beta cohort, or a small percentage before going wide.

Kill switches without redeploys

Disable a bad path in seconds from the dashboard while the rest of your app keeps running.

Three pieces, one system

Togglebit is a full stack I designed and built: a lightweight SDK for your app, a fast evaluation API, and a dashboard to manage everything.

SDK

togglebit

TypeScript-first npm package under 2kb gzipped. React hooks for client components, a zero-dependency server helper for RSC and route handlers.

  • useFlag hook
  • getFlag for server
  • Built-in LRU cache
  • Fails safe to off

API

FastAPI

Python backend with a Redis-cached evaluation path and Postgres as source of truth. API keys for SDK access, Clerk JWT for dashboard management.

  • Sub-ms eval cache
  • 4 flag types
  • Per-environment config
  • Audit log

Dashboard

Next.js

Management UI where you create flags, tune rollouts, generate API keys, and invite teammates. Includes a built-in quickstart with copy-paste snippets.

  • Org + RBAC
  • Rule builder
  • Env switcher
  • Live flag toggles

What you can do today

Everything below is implemented and working. This is not a mockup or a slide deck.

Boolean flags
Simple on/off switches for any feature or code path.
Percentage rollouts
Deterministic bucketing so the same user always gets the same experience. Roll from 0% to 100% with a slider.
Segment targeting
Target users by plan, country, email domain, or any custom attribute you pass in context.
Combined rules
Stack segment gates with percentage rollouts for fine-grained control.
Three environments
Independent config for dev, staging, and prod. Switch environments in the dashboard without leaving your flow.
Teams and API keys
Organizations with role-based access. Generate per-environment API keys shown exactly once.

The SDK

Install with npm, add your API key, and evaluate flags in a few lines. The package ships dual entry points so server code never pulls in React.

$npm install togglebit
Next.js / ReactAvailable
PythonComing soon

Client component

'use client'
import { useFlag } from 'togglebit'

export function Checkout() {
  const v2 = useFlag('checkout-v2', { userId: user.id })
  return v2 ? <NewCheckout /> : <LegacyCheckout />
}

Server component

import { createTogglebit } from 'togglebit/server'

const togglebit = createTogglebit({
  apiKey: process.env.TOGGLEBIT_API_KEY!,
  environment: 'prod',
})

const enabled = await togglebit.getFlag('checkout-v2', {
  userId: user.id,
  plan: 'pro',
})

From flag to rollout in three steps

1

Create a flag

Name it, pick a type (boolean, percentage, segment, or combined), and configure each environment in the dashboard.

2

Wire up the SDK

Wrap your app with TogglebitProvider and call useFlag on the client, or getFlag in a server component.

3

Roll out and adjust

Start at 0%, watch how it behaves, then increase exposure or flip the kill switch if needed.

Setup guide

The dashboard includes a full quickstart with your API key pre-filled. Here is the short version.

  1. 1

    Sign in and create an org

    Use the dashboard to set up your workspace and invite teammates if you want.

  2. 2

    Generate an API key

    Pick an environment (dev, staging, or prod). Copy the key immediately; it is only shown once.

  3. 3

    Install and evaluate

    Run npm install togglebit, add the provider, and check your first flag in under a minute.

Sign in to get started

Common questions

What is a feature flag?

A runtime switch that lets you turn code on or off without redeploying. Your app asks Togglebit whether a flag is enabled for a given user, and you branch accordingly.

Do I need Next.js?

The SDK is built for Next.js App Router first, with React hooks for client components and a separate server entry for RSC. The evaluation API itself is framework-agnostic if you call it directly.

What happens if Togglebit is down?

The SDK fails safe: any network error or missing flag defaults to off. Your app keeps running; the new feature just stays hidden.

Is there a Python SDK?

Not yet. The Python API backend is live, and a Python client is planned. For now, use the TypeScript SDK or call the REST eval endpoint directly.

Can I self-host this?

Yes. The whole stack runs via Docker Compose: nginx, API, dashboard, Postgres, and Redis on a single port. See the repo README for deployment.

Is this a commercial product?

No. Togglebit is a personal project I built to learn full-stack system design and ship something real. The dashboard is open for anyone curious to explore.

Curious? Open the dashboard and poke around.

Create a flag, generate a key, and follow the quickstart. No pitch deck, no sales call. Just the product.

Sign in to explore
View quickstart