Svelte

Install HumanBehavior in Svelte or SvelteKit with PUBLIC env vars and browser-only onMount initialization.

SvelteKit renders layouts on the server and the browser, so the SDK must start inside onMount. Plain Svelte SPAs can initialize from their client entry.

Wizard detection

The wizard detects Svelte when it sees:

Signal	Details
`svelte` dependency	Plain Svelte or SvelteKit
`@sveltejs/kit` dependency	SvelteKit version is preferred for version display
`svelte.config.js` / `.ts` / `.mjs` / `.cjs`	Config-file fallback

The framework config uses PUBLIC_ env vars because SvelteKit exposes $env/static/public only for public variables.

Package

pnpm add humanbehavior-js

Environment variables

PUBLIC_HUMANBEHAVIOR_API_KEY=your-api-key
PUBLIC_HUMANBEHAVIOR_INGESTION_URL=https://ingest.humanbehavior.co

Do not use private env vars in browser code. SvelteKit will only allow public imports from $env/static/public.

SvelteKit init in `src/routes/+layout.svelte`

<script lang="ts">
  import { onMount } from "svelte";
  import { browser } from "$app/environment";
  import {
    PUBLIC_HUMANBEHAVIOR_API_KEY,
    PUBLIC_HUMANBEHAVIOR_INGESTION_URL,
  } from "$env/static/public";
  import { HumanBehaviorTracker } from "humanbehavior-js";

  onMount(() => {
    if (!browser || !PUBLIC_HUMANBEHAVIOR_API_KEY) return;

    HumanBehaviorTracker.init(PUBLIC_HUMANBEHAVIOR_API_KEY, {
      ingestionUrl: PUBLIC_HUMANBEHAVIOR_INGESTION_URL,
    });
  });
</script>

<slot />

onMount only runs in the browser after hydration. The browser guard is an additional safety check.

Plain Svelte SPA init

If your app is not SvelteKit and has a Vite-style src/main.ts, initialize there:

import { HumanBehaviorTracker } from "humanbehavior-js";
import App from "./App.svelte";

const apiKey = import.meta.env.PUBLIC_HUMANBEHAVIOR_API_KEY;
if (apiKey) {
  HumanBehaviorTracker.init(apiKey, {
    ingestionUrl: import.meta.env.PUBLIC_HUMANBEHAVIOR_INGESTION_URL,
  });
}

const app = new App({
  target: document.getElementById("app")!,
});

export default app;

If your plain Svelte build uses Vite and already standardizes on VITE_ env vars, you can adapt the names manually. The shipped wizard config uses PUBLIC_ for the Svelte/SvelteKit family.

What not to do

Pattern	Why
Call `HumanBehaviorTracker.init` at top level of `+layout.svelte`	Runs during SSR/module evaluation
Import SDK in `+layout.server.ts` or server load	Browser APIs are unavailable
Put the API key in non-public env and import it client-side	SvelteKit blocks it
Initialize in many route components	Duplicate setup attempts

SvelteKit route changes normally update browser history, so automatic navigation capture is enough.

If you have custom routing behavior, hold the tracker and call:

void tracker.trackPageView();

after your router completes.

Privacy and forms

Svelte apps often use component-bound forms. Configure replay masking before recording sensitive screens:

HumanBehaviorTracker.init(PUBLIC_HUMANBEHAVIOR_API_KEY, {
  redactionStrategy: {
    mode: "privacy-first",
    unredactFields: ["[data-hb-visible]"],
  },
});

See Replay privacy.

Common pitfalls

Pitfall	Symptom	Fix
Env var named `VITE_HUMANBEHAVIOR_API_KEY` in SvelteKit example	`$env/static/public` import missing	Use `PUBLIC_HUMANBEHAVIOR_API_KEY`
Init outside `onMount`	SSR errors or hydration noise	Move init inside `onMount`
Missing `browser` guard in shared helper	Helper imported by server route	Guard or keep helper client-only
No replay rows after route changes	App never opened in browser or key missing	Verify ingestion requests

Wizard config summary

Wizard field	Value
Integration	`svelte`
Env vars	`PUBLIC_HUMANBEHAVIOR_API_KEY`, `PUBLIC_HUMANBEHAVIOR_INGESTION_URL`
Detection	`svelte`, `@sveltejs/kit`, or `svelte.config.*`
Reference placement	`src/routes/+layout.svelte` with `onMount`

Verify

Restart after env changes.
Open the app in a browser.
Interact with routes and buttons.
Confirm ingestion requests are 2xx.
Open Replays.

Full guide: Verify data is flowing.