---
title: flags/sveltekit
description: APIs for working with feature flags in SvelteKit.
---

# flags/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. |
| `identify` (Optional)    | `Adapter`                          | Provide an evaluation context which will be passed to `decide`.                       |

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

```ts title="flags.ts"
import { flag } from '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 |

```ts title="src/hooks.server.ts"
import { createHandle } from '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.

## Precomputation

These APIs are relevant for [precomputing feature flags](/principles/precompute). See the [marketing pages guide](/frameworks/sveltekit/guides/marketing-pages) to learn how to use it in SvelteKit.

### `precompute`

**Description**: Evaluates multiple feature flags. Returns their values encoded to a single signed string.

| Parameter | Type         | Description                                                      |
| --------- | ------------ | ---------------------------------------------------------------- |
| `flags`   | `function[]` | Flags                                                            |
| `code`    | `string`     | Precomputation code generated by the original `precompute` call. |

Use this inside the API that is called from `reroute`, and when using ISR or prerendering, in Routing Middleware, too.
Use it together with `reroute`/`rewrite` to pass a user-visible URL like `/marketing` to a static variant of the page, like `/marketing/abc-123`.

### `generatePermutations`

**Description**: Calculates all precomputations of the options of the provided flags.

| Parameter           | Type         | Description                                                                                                         |
| ------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
| `flags`             | `function[]` | Flags                                                                                                               |
| `filter` (Optional) | `function`   | This function is called with every possible precomputation of the flag's options. Return `true` to keep the option. |
| `secret` (Optional) | `string`     | The secret used to sign the generated code. Defaults to `$env/dynamic/private#env.FLAGS_SECRET`                     |

Use this when you're prerendering pages and therefore want to generate all combinations of flag values that a page needs at build time.

Example usage:

```ts title="src/routes/[code]/+page.server.ts"
import { generatePermutations } from 'flags/sveltekit';

export const prerender = true;

export async function entries() {
  const codes = await generatePermutations(precomputeFlags);
  return codes.map((code) => ({ code }));
}
```