@vercel/flags/sveltekit API Reference

@vercel/flags/sveltekit

APIs for working with feature flags in SvelteKit.

`flag`

Description: Declares a feature flag

A feature flag declared this way will automatically respect overrides set by Vercel Toolbar and integrate with Runtime Logs, Web Analytics, and more.

Parameter	Type	Description
`key`	`string`	Key of the feature flag.
`decide`	`function`	Resolves the value of the feature flag.
`description` (Optional)	`string`	Description of the feature flag.
`origin` (Optional)	`string`	The URL where this feature flag can be managed.
`options` (Optional)	`{ label?: string, value: any }[]`	Possible values a feature flag can resolve to, which are displayed in Vercel Toolbar.

The key, description, origin, and options appear in Vercel Toolbar.

flags.ts

import { flag } from '@vercel/flags/sveltekit';

export const showSummerSale = flag<boolean>({
  key: 'summer-sale',
  async decide() {
    return false;
  },
  origin: 'https://example.com/flags/summer-sale/',
  description: 'Show Summer Holiday Sale Banner, 20% off',
  options: [
    // options are not necessary for boolean flags, but we customize their labels here
    { value: false, label: 'Hide' },
    { value: true, label: 'Show' },
  ],
});

`getProviderData`

Description: Turns flags declared using flag into Vercel Toolbar compatible definitions.

Parameter	Type	Description
`flags`	`Record<string, Flag>`	A record where the values are feature flags. The keys are not used.

`createHandle`

Description: A handle hook that establishes context for flags, so they have access to the event object.

Parameter	Type	Description
`options`	`{ secret: string, flags?: Record<string, Flag> }`	The `FLAGS_SECRET` environment variable and a record of all the flags

hooks.server.ts

import { createHandle } from '@vercel/flags/sveltekit';
import { FLAGS_SECRET } from '$env/static/private';
import * as flags from '$lib/flags';

export const handle = createHandle({ secret: FLAGS_SECRET, flags });

Note that when composing createHandle with other handlers using SvelteKit's sequence utility then createHandle should come first. Only handlers after it will be able to access feature flags.

Flags SDK