Feature Flag & Canary Rollout Studio

Simulate deterministic percentage rollouts, sticky user bucketing, and A/B test sample size & duration

Rollout Presets

Load canary, staged rollout, and A/B test scenarios

Feature Flag Configuration

Set flag identifier and target percentage

Feature Flag Key:

Rollout Target Percentage:5%

Users are deterministically assigned to buckets 0-99 via consistent hashing

Test Specific User Identifier:

Feature Flag INACTIVE

Bucket #8

Deterministic Cohort Simulation (50 Mock Users)

2 / 50 (4%)

#48

#86

#91

#72

#29

#10

#15

#96

#58

#77

#20

#39

#34

#53

#96

#15

#25

#49

#30

#11

#92

#73

#54

#35

#16

#82

#40

#59

#78

#97

#64

#83

#21

#92

#11

#99

#80

#37

#18

#75

#56

#13

#94

#51

#32

#98

A/B Testing Sample Size & Duration

Sample / Variant

16,726

Total Sample

33,452

Estimated Runtime

~2 days

// Next.js Middleware Edge Feature Flag
import { NextResponse, type NextRequest } from 'next/server';

function hashBucket(key: string): number {
  let hash = 0x811c9dc5;
  for (let i = 0; i < key.length; i++) {
    hash ^= key.charCodeAt(i);
    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
  }
  return Math.abs(hash >>> 0) % 100;
}

export function middleware(request: NextRequest) {
  const userId = request.cookies.get('userId')?.value || request.ip || 'anonymous';
  const bucket = hashBucket('new-checkout-v2:' + userId);
  const isEnabled = bucket < 5; // 5% rollout

  const response = NextResponse.next();
  response.headers.set('X-Flag-new-checkout-v2', isEnabled ? 'true' : 'false');
  return response;
}

// Pure TypeScript Deterministic Flag Evaluator
export function isFeatureActive(userId: string): boolean {
  let hash = 0x811c9dc5;
  const key = 'new-checkout-v2:' + userId;
  for (let i = 0; i < key.length; i++) {
    hash ^= key.charCodeAt(i);
    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
  }
  const bucket = Math.abs(hash >>> 0) % 100;
  return bucket < 5;
}

// Next.js Middleware Edge Feature Flag import { NextResponse, type NextRequest } from 'next/server'; function hashBucket(key: string): number { let hash = 0x811c9dc5; for (let i = 0; i < key.length; i++) { hash ^= key.charCodeAt(i); hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24); } return Math.abs(hash >>> 0) % 100; } export function middleware(request: NextRequest) { const userId = request.cookies.get('userId')?.value || request.ip || 'anonymous'; const bucket = hashBucket('new-checkout-v2:' + userId); const isEnabled = bucket < 5; // 5% rollout const response = NextResponse.next(); response.headers.set('X-Flag-new-checkout-v2', isEnabled ? 'true' : 'false'); return response; }

// Pure TypeScript Deterministic Flag Evaluator export function isFeatureActive(userId: string): boolean { let hash = 0x811c9dc5; const key = 'new-checkout-v2:' + userId; for (let i = 0; i < key.length; i++) { hash ^= key.charCodeAt(i); hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24); } const bucket = Math.abs(hash >>> 0) % 100; return bucket < 5; }