> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte

The [Fingerprint Svelte SDK](https://github.com/fingerprintjs/svelte) integrates Fingerprint into Svelte applications. It supports all capabilities of the JavaScript agent including a built-in [caching mechanism](/reference/js-agent-start-function#cache). See the [Svelte quickstart](/docs/svelte-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprint/svelte` as a dependency to your application.

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/svelte
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/svelte
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/svelte
  ```
</CodeGroup>

Wrap your application (or component) in `FingerprintProvider`. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```svelte Svelte theme={"theme":"github-dark-dimmed"}
// src/App.svelte
<script>
  import { FingerprintProvider } from '@fingerprint/svelte'
  import VisitorData from './VisitorData.svelte'

  const options = {
    apiKey: 'PUBLIC_API_KEY',
    endpoints: 'https://metrics.yourwebsite.com',
    region: 'us',
  }
</script>

<FingerprintProvider {options}>
  <VisitorData />
</FingerprintProvider>
```

Use the `useVisitorData` hook in your components to identify visitors.

```svelte Svelte theme={"theme":"github-dark-dimmed"}
// src/VisitorData.svelte
<script>
  import { useVisitorData } from '@fingerprint/svelte';
  const { getData, data, isLoading, error } = useVisitorData({ immediate: false });
</script>

<div>
  <button on:click={() => getData()}>Get visitor data</button>
  {#if $isLoading} Loading... {/if}
  {#if $error} {$error.message} {/if}
  {#if $data}
    <pre>{JSON.stringify($data, null, 2)}</pre>
  {/if}
</div>
```

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/svelte). The repository also contains [example applications](https://github.com/fingerprintjs/svelte/tree/main/examples) demonstrating the usage of the library.

### Migration guide for Svelte SDK v3.0.0

Version 3.0.0 of the Svelte SDK switches from JavaScript agent v3 to [JavaScript agent v4](/reference/migrating-from-v3-to-v4). It also adds Svelte 5 support (the `svelte` peer dependency is widened to `^4.0.0 || ^5.0.0`).

1. Install the new version of the package:

<CodeGroup>
  ```bash NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/svelte
  ```

  ```bash Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/svelte
  ```

  ```bash PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/svelte
  ```
</CodeGroup>

2. Update the provider import and options.

The default caching strategy has changed from `sessionStorage` caching to **no caching by default**, aligned with the underlying [JavaScript agent v4 default](/reference/js-agent-start-function#cache). To preserve the previous behavior, explicitly configure caching in the provider options (see example below).

```svelte Update provider imports and usage theme={"theme":"github-dark-dimmed"}
<script>
// [!code --:4]
  import {
    FpjsProvider,
    FingerprintJSPro,
  } from '@fingerprintjs/fingerprintjs-pro-svelte'
// [!code ++]
  import { FingerprintProvider } from '@fingerprint/svelte'

// [!code --:10]
  const options = {
    loadOptions: {
      apiKey: 'PUBLIC_API_KEY',
      endpoint: ['https://metrics.yourwebsite.com', FingerprintJSPro.defaultEndpoint],
      scriptUrlPattern: [
        'https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js',
        FingerprintJSPro.defaultScriptUrlPattern,
      ],
    },
  }
// [!code ++:8]
  const options = {
    cache: {
      storage: 'sessionStorage',
      duration: 3600,
    },
    apiKey: 'PUBLIC_API_KEY',
    endpoints: ['https://metrics.yourwebsite.com'],
  }
</script>
```

Also rename the component in your template from `FpjsProvider` to `FingerprintProvider`:

```svelte theme={"theme":"github-dark-dimmed"}
<FingerprintProvider {options}>
  <slot />
</FingerprintProvider>
```

3. Update `useVisitorData` calls and result field names:

```javascript Update visitor data usage theme={"theme":"github-dark-dimmed"}
// [!code --]
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';
import { useVisitorData } from '@fingerprint/svelte'; // [!code ++]

// [!code --:4]
const { getData, data, isLoading, error } = useVisitorData(
  { extendedResult: true },
  { immediate: false },
);
// `immediate` can now be set in the first argument // [!code ++:2]
const { getData, data, isLoading, isFetched, error } = useVisitorData({ immediate: false });

// [!code --:2]
const { visitorId, requestId } = await getData();
console.log(visitorId, requestId);
// [!code ++:2]
const { visitor_id, event_id } = await getData();
console.log(visitor_id, event_id);
```

The v4 agent uses snake\_case field names. `requestId` is now `event_id`, and `visitorId` is now `visitor_id`.