Feature Flags Quickstart

This is the flags-only path: no auth setup, no billing, no user records. You need a Bridge app ID from app.thebridge.dev.

1. Install

Svelte

npm install @nebulr-group/bridge-svelte

NestJS

npm install @nebulr-group/bridge-nestjs

2. Initialize

Svelte

Bootstrap Bridge in your root layout. For flags-only, the config is just your app ID and all routes stay public:

src/routes/+layout.ts

import type { LayoutLoad } from './$types';
import type { BridgeConfig, RouteGuardConfig } from '@nebulr-group/bridge-svelte';
import { bridgeBootstrap } from '@nebulr-group/bridge-svelte';

export const ssr = false;

export const load: LayoutLoad = async ({ url }) => {
  const config: BridgeConfig = {
    appId: import.meta.env.VITE_BRIDGE_APP_ID,
  };
  const routeConfig: RouteGuardConfig = {
    rules: [{ match: /.*/, public: true }],
    defaultAccess: 'public',
  };
  await bridgeBootstrap(url, config, routeConfig);
  return {};
};

src/routes/+layout.svelte

<script lang="ts">
  import { BridgeBootstrap } from '@nebulr-group/bridge-svelte';
  // Keep the flags module on the dependency graph — BridgeBootstrap
  // auto-attaches it (rule cache, live updates, telemetry).
  import '@nebulr-group/bridge-svelte/flags';

  let { children } = $props();
</script>

<BridgeBootstrap />
{@render children()}

NestJS

Register the flags module once in your root module. It’s auth-free — BridgeFlagsModule works without any other Bridge module:

app.module.ts

import { Module } from '@nestjs/common';
import { BridgeFlagsModule } from '@nebulr-group/bridge-nestjs/flags';

@Module({
  imports: [
    BridgeFlagsModule.forRoot({
      apiBaseUrl: 'https://api.thebridge.dev',
      apiKey: process.env.BRIDGE_API_KEY!,
    }),
  ],
})
export class AppModule {}

There’s also a forRootAsync variant if your API key comes from ConfigModule.

3. Evaluate your first flag

The default value is mandatory — it’s returned whenever the flag isn’t configured yet or Bridge is unreachable, so a flag call can never break your app. The flag’s type (boolean, string, number, or JSON) is inferred from the default.

Svelte

<script lang="ts">
  import { useFlag, FeatureFlag } from '@nebulr-group/bridge-svelte/flags';

  const banner = useFlag('show_banner', false);
</script>

{#if banner.value}
  <div class="banner">We shipped something new!</div>
{/if}

<!-- Or declaratively: -->
<FeatureFlag key="show_banner" defaultValue={false}>
  <div class="banner">We shipped something new!</div>
</FeatureFlag>

useFlag is reactive — when the flag changes (admin edit, rule change, kill switch), the value updates in place.

NestJS

import { Injectable } from '@nestjs/common';
import { BridgeFlagsService } from '@nebulr-group/bridge-nestjs/flags';

@Injectable()
export class ReportsService {
  constructor(private readonly flags: BridgeFlagsService) {}

  generate() {
    if (this.flags.flag('use_new_pipeline', false)) {
      return this.generateV2();
    }
    return this.generateV1();
  }
}

Or gate a whole route:

import { Controller, Get, UseGuards } from '@nestjs/common';
import { RequireFlag, BridgeFlagGuard } from '@nebulr-group/bridge-nestjs/flags';

@Controller('exports')
@UseGuards(BridgeFlagGuard)
export class ExportsController {
  @Get()
  @RequireFlag('exports_enabled')
  list() { /* … */ }
}

4. See it in the admin

You don’t register flags manually. The first time your code evaluates show_banner, the key self-announces to Bridge and appears in the Flags list with a Discovered badge. Open it, pick one of the three states — Off for everyone, On for everyone, or On for users matching a rule — and save.

5. Watch it update live

With your app open, flip the flag in the admin. The change reaches every connected app in about a second — the SDK receives the new rule over a live channel and re-evaluates locally. No refresh, no polling, no code.

If the connection drops, your app keeps working on last-known values and refetches on reconnect.

Next steps

• Targeting & attributes — target rules on anything your code sends
• Common patterns — A/B tests, percentage rollouts, kill switches
• Framework deep dives: Svelte · NestJS