vTilt
By roleFoundersKnow what to fix firstMarketersSee what happens after the clickCMOsSee what your budget really buys
By businessSaaSTurn signups into active usersEcommerceSee why shoppers abandon cartsAgenciesProve your work to clientsEnterpriseOne customer record for every team
MeasureWeb AnalyticsFind where buyers leaveSession ReplaySee why they left, not just that they didAdsKnow what paid visitors do nextIntegrationsOne snippet feeds your stack
ThinkPeopleOne profile per customerCustomer MemoryvTilt remembers every visitorSite KnowledgeAnswers and audits from your own pages
ActAsk AIAnswers from real behaviorAI ChatChat that knows the visitorEmail CampaignsEmail from real visits
PricingWhy vTiltDocs
Docs / Svelte / SvelteKit
Getting Started
OverviewInstallInitializeIdentify usersTrack eventsLogout & resetVerify eventsCommon mistakes
Guides
Event forwardingReverse proxyRealtime dashboardSite knowledge
Frontend frameworks
Next.jsNuxt.jsVue.jsReactReact RouterRemixGatsbySvelte / SvelteKitAstroAngularTanStack StartDocusaurus
Backend frameworks
NestJSHonoCloudflare WorkersDjangoFlaskLaravelPhoenixRuby on Rails
Backend languages
PythonPHPRubyElixirGoJava.NET / C#Rust
Stack guides
Vue + PHP
API Reference
Browser SDK
Script bundlesAutocaptureWeb VitalsSession recordingChat widgetFeature readinessRemote configurationDebug logging
Node SDK
Install & setupCapture, identify & aliasContext & shutdownGlobal properties & opt-outError tracking
MCP server
Guides
OverviewAuthenticationOAuthAgent skills (prompts)AI intelligenceSite knowledgeGoogle AdsMeta Ads
Client setup
CursorClaude DesktopVS CodeCodex

Getting Started

OverviewInstallInitializeIdentify usersTrack eventsLogout & resetVerify eventsCommon mistakes

Guides

Event forwardingReverse proxyRealtime dashboardSite knowledge
Next.jsNuxt.jsVue.jsReactReact RouterRemixGatsbySvelte / SvelteKitAstroAngularTanStack StartDocusaurus

API Reference

MCP server

On this page

On this page

  • 1. Add your environment variables
  • 2. Install & initialise
  • 3. Identify users on every page load
  • 4. Capture events from components
  • 5. Server-side events with +server.ts
  • Next steps
DocsGuidesFrontend frameworksSvelte / SvelteKit

Svelte / SvelteKit

Last updated July 22, 2026

Integrate vTilt with SvelteKit — npm package or inline script, route navigations, server-side events from +server endpoints.

vTilt slots into SvelteKit through +layout.svelte (or app.html) for the browser side and +server.ts route handlers for server-side events. SvelteKit's browser flag from $app/environment keeps the SDK out of the SSR bundle.

#1. Add your environment variables

# .env
PUBLIC_VTILT_TOKEN=YOUR_PROJECT_TOKEN
PUBLIC_VTILT_HOST=https://www.vtilt.com
VTILT_TRACKER_TOKEN=YOUR_PROJECT_TOKEN
text

#2. Install & initialise

Choose how you load the Browser SDK. npm initialises the SDK in the root layout; the inline script drops a stub in app.html with no package to install. Both expose the same window.vt global — the rest of this guide is identical either way.

Install the package:

npm install @v-tilt/browser
bash

Initialise in the root layout and emit pageviews on navigation:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte'
  import { browser } from '$app/environment'
  import { afterNavigate } from '$app/navigation'
  import { vt } from '@v-tilt/browser'
  import { PUBLIC_VTILT_TOKEN, PUBLIC_VTILT_HOST } from '$env/static/public'

  onMount(() => {
    if (!browser) return
    vt.init(PUBLIC_VTILT_TOKEN, {
      api_host: PUBLIC_VTILT_HOST,
      autocapture: true,
      capture_pageview: false,
      capture_pageleave: true,
    })
  })

  afterNavigate(({ to, from }) => {
    if (!to) return
    vt.capture('$pageview', {
      $current_url: window.location.href,
      $pathname: to.url.pathname,
      $referrer: from?.url.pathname,
    })
  })
</script>

<slot />
svelte

Tip

Need chat on first paint? Swap array.js for array.chat.js and add chat: { enabled: true }. See Script bundles.

#3. Identify users on every page load

Pull the current user from a +layout.server.ts load function, then identify on the client whenever the session changes.

// src/routes/+layout.server.ts
export const load = async ({ locals }) => ({
  user: locals.user ?? null,
})
typescript
<!-- src/routes/+layout.svelte (continued) -->
<script lang="ts">
  import { browser } from '$app/environment'
  import { vt } from '@v-tilt/browser'
  import type { LayoutData } from './$types'
  export let data: LayoutData

  $: if (browser && data.user) {
    vt.identify(data.user.id, { email: data.user.email })
  }
</script>
svelte

Important

Identify on every authenticated page load — not only at login — or visitors arriving with an existing session cookie remain anonymous. See Identify & alias for the full model.

#4. Capture events from components

<script lang="ts">
  import { vt } from '@v-tilt/browser'

  function trackCta() {
    vt.capture('cta_clicked', { location: 'hero' })
  }
</script>

<button on:click={trackCta}>Get started</button>
svelte

Note

Using the inline script? Replace vt with window.vt and drop the import.

#5. Server-side events with +server.ts

For server-side events, install the Node SDK:

npm install @v-tilt/node
bash
// src/lib/server/vtilt.ts
import { VTiltNode } from '@v-tilt/node'
import { VTILT_TRACKER_TOKEN } from '$env/static/private'
import { PUBLIC_VTILT_HOST } from '$env/static/public'

export const vtilt = new VTiltNode(VTILT_TRACKER_TOKEN, {
  host: PUBLIC_VTILT_HOST,
})
typescript
// src/routes/api/checkout/+server.ts
import { json } from '@sveltejs/kit'
import { vtilt } from '$lib/server/vtilt'

export async function POST({ request }) {
  const { userId, amount } = await request.json()

  vtilt.capture({
    distinctId: userId,
    event: 'purchase_completed',
    properties: { amount },
  })
  await vtilt.shutdown()

  return json({ ok: true })
}
typescript

#Next steps

  • Identify & alias — anonymous → known user merge.
  • Autocapture — what's captured automatically.
  • Node SDK — server-side event shapes.
  • Common mistakes — integration pitfalls to avoid before you ship.
PreviousGatsbyIntegration guidesNextAstroIntegration guides