---
title: "SvelteKit"
description: "Initialize from the root layout with onMount. The callback runs in the browser and is skipped during server rendering."
documentation: "https://tracwell.app/docs/frameworks/sveltekit"
markdown: "https://tracwell.app/docs/frameworks/sveltekit.md"
---

# SvelteKit

> Initialize from the root layout with onMount. The callback runs in the browser and is skipped during server rendering.

## Initialize Tracwell

```html
<script lang="ts">
  import { onMount } from "svelte";
  import { createTracwell } from "tracwell";

  onMount(() => {
    createTracwell({
      collectionMode: "product",
      projectKey: "tw_live_...",
    });
  });
</script>
```

Keep the root layout mounted across navigation. SvelteKit page changes are then captured from browser history.

## Track an event

Keep the initialized client available to the component or service that owns the successful product outcome. Call `track()` only after that outcome completes.

```ts
const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}
```

See the [custom events guide](https://tracwell.app/docs/events.md) for naming, property limits, and verification.