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

# Svelte / SvelteKit

> Install Tracelit in a Svelte or SvelteKit project using onMount in the root layout. SSR-safe and automatic route tracking included.

<img src="https://mintcdn.com/tracelit/yOAHPOHDFCUOtcaa/images/svelte.svg?fit=max&auto=format&n=yOAHPOHDFCUOtcaa&q=85&s=bad7b323590d28ecb41b872536f3e714" alt="Svelte" style={{ width: '40px', marginBottom: '4px' }} width="512" height="512" data-path="images/svelte.svg" />

```bash theme={null}
npm install @tracelit/tracker
```

Call `init()` inside `onMount` in your root layout so it only runs in the browser:

```svelte theme={null}
<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'
  import { init } from '@tracelit/tracker'

  onMount(() => init({ token: 'YOUR_TOKEN_HERE', environment: 'production' }))
</script>

<slot />
```

<Warning>
  Always set `environment`. Only `"production"` and `"development"` are accepted. If omitted, events default to `development`.
</Warning>

<Note>
  `onMount` only runs on the client, so `init()` is never called during SSR. No extra guard needed.
</Note>

***

## Adding user identity

```svelte theme={null}
<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'
  import { init, identify, reset } from '@tracelit/tracker'
  export let data  // from +layout.server.ts

  onMount(() => {
    init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
    if (data.user) {
      identify(data.user.id, { email: data.user.email, plan: data.user.plan })
    }
  })

  // React to auth changes
  $: if (data.user) identify(data.user.id, { email: data.user.email })
  $: if (!data.user) reset()
</script>

<slot />
```

***

## LLM Prompt

Paste this into your coding assistant to install Tracelit for you:

```text theme={null}
Install Tracelit in my SvelteKit project.
Initialize @tracelit/tracker in src/routes/+layout.svelte inside onMount:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Make minimal edits, show changed files, and include a 30-second verification checklist.
```

***

## What's next?

| Topic                                   | Description                                   | Guide                             |
| --------------------------------------- | --------------------------------------------- | --------------------------------- |
| <Icon icon="user" /> **Identify users** | Full guide to linking sessions to real users. | [Read](/tracking/identify-users)  |
| <Icon icon="tag" /> **Feature tagging** | Tag flows in session replays.                 | [Read](/features/feature-tagging) |