Session Replay for Svelte

Session replay for Svelte and SvelteKit applications.

Quick Start

1. Install the package

npm install @puppethand/record

2. Initialize recording

+layout.svelte

<!-- +layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { record } from '@puppethand/record';

  onMount(() => {
    record({
      apiKey: 'ph_pub_xxx',
    });
  });
</script>

<slot />

3. View sessions in your dashboard

Sessions will appear in your PuppetHand dashboard within seconds of recording.

Svelte-Specific Features

Svelte & SvelteKit support
Store state tracking
Reactive statement capture
Server-side compatible
Adapter-agnostic

Configuration Options

Configuration

record({
  apiKey: 'ph_pub_xxx',

  // Optional configuration
  maskAllInputs: true,          // Mask all input values
  maskAllText: false,           // Mask all text content
  blockClass: 'ph-block',       // Block elements with this class
  ignoreClass: 'ph-ignore',     // Ignore elements with this class

  // Sampling (reduce data volume)
  sampling: {
    mousemove: true,            // Record mouse movements
    scroll: 100,                // Throttle scroll events (ms)
    input: 'last',              // Record only last input value
  },

  // Network recording
  recordNetwork: true,          // Record fetch/XHR requests
  recordConsole: true,          // Record console logs
});

Full Documentation

For advanced configuration, troubleshooting, and best practices, check out our full Svelte documentation.

View Svelte Docs

Ready to add session replay to Svelte?

Start free with 10GB storage. Setup takes 30 seconds.

Start Free View Pricing