SDK Playground

Test feature flags with different SDKs - see code examples and live evaluation

📖 How it works

This demo tests your Rollgate feature flags in real-time.

Setup:

API Key — Get it from Settings → API Keys (use client key for browser)
User ID — Identifies the user for rollout targeting (same ID = same result)
Attributes — Extra context for targeting rules (e.g., plan: pro, country: IT)

Modes:

Polling — Fetches flags at regular intervals (default: 30s)
SSE — Real-time updates via Server-Sent Events. When a flag changes, you get notified instantly and flags are refetched.

Evaluation:

Evaluation happens server-side — the API returns true/false based on your user context
Rollout % uses consistent hashing: same User ID always gets the same result
Target Users in a flag always get true, regardless of rollout
Targeting Rules evaluate attributes (e.g., "if plan = pro then 100%")

Tips:

Use "Fetch All" to load all flags from your environment
Change User ID to test rollout distribution across different users
SSE URL bypasses Cloudflare for lower latency real-time updates

Live Tester

API URL

SSE URL (for real-time, bypasses CDN)

API Key

User ID

Mode

Interval (sec)

Feature Flags

Targeting Attributes

Results

Disconnected

No results yet

Statistics

Requests

Success

Errors

SSE

Avg Latency

Event Log

Events will appear here

Installation

npm install @rollgate/react

Setup Provider

tsx

import { RollgateProvider } from '@rollgate/react';

function App() {
  return (
    <RollgateProvider
      apiKey="rg_client_xxxxx"
      options={{ polling: 30000 }}
    >
      <YourApp />
    </RollgateProvider>
  );
}

Using Hooks

tsx

import { useFlag, useFlags } from '@rollgate/react';

function MyComponent() {
  // Single flag
  const darkMode = useFlag('dark-mode');

  // Multiple flags
  const { flags, isLoading } = useFlags();

  if (darkMode) {
    return <DarkTheme />;
  }
  return <LightTheme />;
}

With User Context

tsx

import { useRollgate } from '@rollgate/react';

function UserProfile() {
  const { identify } = useRollgate();

  useEffect(() => {
    identify({
      userId: 'user-123',
      attributes: {
        plan: 'pro',
        country: 'IT'
      }
    });
  }, []);
}

Installation

npm install @rollgate/vue

Setup Plugin

import { createApp } from 'vue';
import { RollgatePlugin } from '@rollgate/vue';

const app = createApp(App);

app.use(RollgatePlugin, {
  apiKey: 'rg_client_xxxxx',
  polling: 30000
});

app.mount('#app');

Composition API

vue

<script setup>
import { useFlag, useFlags } from '@rollgate/vue';

const darkMode = useFlag('dark-mode');
const { flags, isLoading } = useFlags();
</script>

<template>
  <DarkTheme v-if="darkMode" />
  <LightTheme v-else />
</template>

Installation

npm install @rollgate/angular

Setup Module

import { RollgateModule } from '@rollgate/angular';

@NgModule({
  imports: [
    RollgateModule.forRoot({
      apiKey: 'rg_client_xxxxx',
      polling: 30000
    })
  ]
})
export class AppModule {}

Using Service

import { RollgateService } from '@rollgate/angular';

@Component({ ... })
export class MyComponent {
  darkMode$ = this.rollgate.getFlag('dark-mode');

  constructor(private rollgate: RollgateService) {}
}

Directive

html

<div *rgFlag="'new-feature'">
  This content is shown when new-feature is enabled
</div>

Installation

npm install @rollgate/svelte

Setup

svelte

<script>
  import { initRollgate } from '@rollgate/svelte';

  initRollgate({
    apiKey: 'rg_client_xxxxx',
    polling: 30000
  });
</script>

Using Stores

svelte

<script>
  import { getFlag, flags } from '@rollgate/svelte';

  const darkMode = getFlag('dark-mode');
</script>

{#if $darkMode}
  <DarkTheme />
{:else}
  <LightTheme />
{/if}

Installation

npm install @rollgate/sdk-node

Basic Usage

import { RollgateClient } from '@rollgate/sdk-node';

const client = new RollgateClient({
  apiKey: 'rg_server_xxxxx',
  polling: 30000
});

// Check a flag
const isEnabled = await client.isEnabled('dark-mode');

// With user context
const result = await client.isEnabled('premium-feature', {
  userId: 'user-123',
  attributes: { plan: 'pro' }
});

Express Middleware

import express from 'express';

const app = express();

app.use(async (req, res, next) => {
  req.flags = await client.getAllFlags({
    userId: req.user?.id,
    attributes: { plan: req.user?.plan }
  });
  next();
});

app.get('/api/features', (req, res) => {
  if (req.flags['new-api']) {
    return res.json({ version: 'v2' });
  }
  res.json({ version: 'v1' });
});

Installation

pip install rollgate

Basic Usage

python

from rollgate import RollgateClient

client = RollgateClient(
    api_key="rg_server_xxxxx",
    polling_interval=30
)

# Check a flag
if client.is_enabled("dark-mode"):
    print("Dark mode is on!")

# With user context
result = client.is_enabled(
    "premium-feature",
    user_id="user-123",
    attributes={"plan": "pro"}
)

Async Support

python

from rollgate import AsyncRollgateClient
import asyncio

async def main():
    client = AsyncRollgateClient(api_key="rg_server_xxxxx")

    is_enabled = await client.is_enabled("new-feature")

    await client.close()

asyncio.run(main())