> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.getunleash.io/sdks/svelte/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.getunleash.io/_mcp/server.

# Svelte SDK

> Set up the Unleash Svelte SDK to evaluate feature flags in Svelte apps with context, variants, rendering control, and Edge.

The Unleash Svelte SDK lets you evaluate feature flags in Svelte applications. It connects to Unleash or [Unleash Edge](/unleash-edge) to fetch evaluated flags for a given [Unleash context](/concepts/unleash-context).

You can use this SDK with [Unleash Enterprise](https://www.getunleash.io/pricing) or [Unleash Open Source](https://github.com/Unleash/unleash).

For an overview of how Unleash SDKs work, including offline behavior, feature compatibility across SDKs, and default refresh and metrics intervals, refer to the [SDK overview](/sdks).

## Installation

#### npm

```bash
npm install @unleash/proxy-client-svelte
```

#### yarn

```bash
yarn add @unleash/proxy-client-svelte
```

## Initialization

To use this SDK, you need:

* A connection to the [Frontend API](/api#frontend-api) or [Unleash Edge](/unleash-edge)
* A [frontend API token](/concepts/api-tokens-and-client-keys#frontend-tokens)

Import the provider like this in your entrypoint file (typically index.svelte):

```svelte
<script lang="ts">
	import { FlagProvider } from '@unleash/proxy-client-svelte';

	const config = {
		url: '<unleash-url>/api/frontend', // Your Frontend API or Unleash Edge URL
		clientKey: '<your-token>', // Frontend API token
		refreshInterval: 15, // How often (in seconds) the client should poll for updates
		appName: 'your-app-name' // The name of your application. It's only used for identifying your application
	};
</script>

<FlagProvider {config}>
	<App />
</FlagProvider>
```

### Connection options

Set `url` to the `/api/frontend` endpoint of your Unleash instance or your [Unleash Edge](/unleash-edge) instance. Set `clientKey` to a [frontend API token](/concepts/api-tokens-and-client-keys#frontend-tokens).

## Check flags

To check if a feature is enabled:

```svelte
<script lang="ts">
	import { useFlag } from '@unleash/proxy-client-svelte';

	const enabled = useFlag('travel.landing');
</script>

{#if $enabled}
	<SomeComponent />
{:else}
	<AnotherComponent />
{/if}
```

## Check variants

To check variants:

```svelte
<script lang="ts">
	import { useVariant } from '@unleash/proxy-client-svelte';

	const variant = useVariant('travel.landing');
</script>

{#if variant.enabled && variant.name === 'SomeComponent'}
	<SomeComponent />
{:else if variant.enabled && variant.name === 'AnotherComponent'}
	<AnotherComponent />
{:else}
	<DefaultComponent />
{/if}
```

## Defer rendering until flags fetched

useFlagsStatus retrieves the ready state and error events.
Follow the following steps in order to delay rendering until the flags have been fetched.

```svelte
<script lang="ts">
	import { useFlagsStatus } from '@unleash/proxy-client-svelte';

	const { flagsReady, flagsError } = useFlagsStatus();
</script>

{#if !$flagsReady}
	<Loading />
{:else}
	<MyComponent error={flagsError} />
{/if}
```

## Unleash context

Initial context can be specified on a `FlagProvider` `config.context` property.

`<FlagProvider config={{ ...config, context: { userId: 123 } }}>`

This code sample shows you how to update the unleash context dynamically:

```svelte
<script lang="ts">
	import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte';

	export let userId;

	const toggle = useFlag('my-toggle');
	const updateContext = useUnleashContext();

	$: {
		// context is updated with userId
		updateContext({ userId });
	}

	// OR if you need to perform an action right after new context is applied
	$: {
		async function run() {
			// Can wait for the new flags to pull in from the different context
			await updateContext({ userId });
			console.log('new flags loaded for', userId);
		}
		run();
	}
</script>
```

## Deferring client start

By default, the Unleash client will start polling for toggles immediately when the `FlagProvider` component renders. You can prevent it by setting `startClient` prop to `false`. This is useful when you'd like to for example bootstrap the client and work offline.

Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance.

To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function.

```svelte
<script lang="ts">
	const client = new UnleashClient({
		/* ... */
	});

	onMount(async () => {
		// do async work ...
		client.start();
	});
</script>

<FlagProvider unleashClient={client} startClient={false}>
	<App />
</FlagProvider>
```

## Use Unleash client directly

```svelte
<script lang="ts">
	import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-svelte';

	export let userId;

	const client = useUnleashClient();

	const login = () => {
		// login user
		if (client.isEnabled('new-onboarding')) {
			// Send user to new onboarding flow
		} else {
			// send user to old onboarding flow
		}
	};
</script>

<LoginForm {login} />
```

> Set up the Unleash Svelte SDK to evaluate feature flags in Svelte apps with context, variants, rendering control, and Edge.