How to add session replay to a SvelteKit app

Bug reports rarely include the state that caused them. Session replay records what each user of your SvelteKit app saw and did, so "the button didn't work" becomes a session you can watch.

I turn on session replay, set a sample rate per environment, mask sensitive elements and routes, and check a test session. The complete setup on this page works without completing another tutorial.

What you'll build

Prerequisites

• A SvelteKit 2.10 or later app with Svelte 5 and TypeScript, for example one created with npx sv create. The init export in src/hooks.client.ts arrived in SvelteKit 2.10.
• An Amplitude project API key. In Amplitude, go to Settings > Projects > your project > General.
• To change sampling or masking in Amplitude's settings, an Admin or Manager role. The code on this page doesn't need it.

No Amplitude account yet? Session replay for web is available on all plans, so a free account covers this tutorial. Sign up for free to get your project API key.

Use Node.js 22.12+ in the 22.x series, or Node.js 24, with pnpm. The complete demo pins SvelteKit 2 and Svelte 5 dependencies.

1. Install the SDK

I use the Browser Unified SDK installed with pnpm. Its initAll call accepts analytics and session replay options. The complete setup below includes the SDK dependency; if your app already initializes Amplitude, merge only the additions.

I start with the complete demo below. No earlier Build tutorial is required. In an existing app, merge the SDK and route additions into its current files; keep authentication, identity handling and other instrumentation. The setup block contains separate files: create each named file before running the terminal commands.

// -- package.json --
{
  "name": "sveltekit-session-replay",
  "private": true,
  "type": "module",
  "packageManager": "pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8",
  "scripts": {
    "dev": "vite dev",
    "build": "svelte-kit sync && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@amplitude/unified": "1.1.42",
    "@sveltejs/kit": "2.70.3",
    "svelte": "5.57.2"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "6.1.1",
    "@sveltejs/vite-plugin-svelte": "6.2.4",
    "vite": "7.3.7",
    "typescript": "5.9.3"
  }
}

// -- pnpm-workspace.yaml --
minimumReleaseAge: 10080
trustPolicy: no-downgrade

// -- svelte.config.js --
import adapter from '@sveltejs/adapter-auto';
export default { kit: { adapter: adapter() } };

// -- vite.config.ts --
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({ plugins: [sveltekit()] });

// -- tsconfig.json --
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler"
  }
}

// -- src/app.html --
<!doctype html>
<html lang="en">
  <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />%sveltekit.head%</head>
  <body data-sveltekit-preload-data="hover"><div style="display: contents">%sveltekit.body%</div></body>
</html>

// -- src/routes/+layout.svelte --
<script lang="ts">
  let { children } = $props();
</script>
<nav>
  <a href="/">Home</a>
  <a href="/team">Team</a>
  <a href="/billing">Billing</a>
  <a href="/billing/invoices">Invoices</a>
</nav>
{@render children()}

// -- src/routes/+page.svelte --
<h1>Local replay demo</h1>
<p>Use the navigation to exercise the tutorial.</p>

mkdir sveltekit-session-replay-demo
cd sveltekit-session-replay-demo
# Create the named setup files shown on this page, then install:
pnpm install
# Start the app after adding the SDK and route files in the remaining steps.

SvelteKit only exposes env vars prefixed with PUBLIC_ to browser code. The project API key is public and its scope is limited to the minimum needed to ingest data, so shipping it to the browser is expected, but keep it out of source anyway.

PUBLIC_AMPLITUDE_API_KEY=your-project-api-key

Already on @amplitude/analytics-browser to keep bundle size down? The session replay plugin takes the same options as the sessionReplay block below. Add it to your existing init rather than installing a second SDK.

2. Set a sample rate per environment

I initialize once in the client hook's init export and choose the sample rate from SvelteKit's dev flag. In an existing app, keep its analytics options and any ready-promise wrapper; merge the sessionReplay additions into that existing call.

import type { ClientInit } from '@sveltejs/kit';
import { dev } from '$app/environment';
import { PUBLIC_AMPLITUDE_API_KEY } from '$env/static/public';
import * as amplitude from '@amplitude/unified';

export const init: ClientInit = () => {
  if (!PUBLIC_AMPLITUDE_API_KEY) {
    console.warn('PUBLIC_AMPLITUDE_API_KEY is not set; analytics is off.');
    return;
  }

  void amplitude.initAll(PUBLIC_AMPLITUDE_API_KEY, {
    // This tutorial does not load guides and surveys. Keep your existing engagement setup if you use it.
    engagement: { skip: true },
    analytics: {
      autocapture: {
        attribution: true,
        pageViews: true,
        // Tracks [Amplitude] Start Session and End Session events.
        sessions: true,
        formInteractions: true,
        fileDownloads: true,
        elementInteractions: true,
      },
    },
    sessionReplay: {
      useWebWorker: false, // Explicitly use main-thread processing for this demo.
      // Fraction of sessions to record: every session in `vite dev`, 1% in a production build.
      sampleRate: dev ? 1 : 0.01,
      // Adds [Amplitude] Session Replay Debug with an API key hash. Initial setup only.
      debugMode: dev,
      // Selectors for the data attributes in steps 3 and 4.
      privacyConfig: {
        maskSelector: ['[data-amp-mask]'],
        blockSelector: ['[data-amp-block]'],
        unmaskSelector: ['[data-amp-unmask]'],
      },
    },
  });
};

Later pages in this hub show src/hooks.client.ts again. If you copy a version that lacks privacyConfig, keep this block.

The plugin's own default sample rate is 0, so nothing records until you set one. Amplitude recommends starting production low, around 0.01, and raising it over a few days; capture stops for the month once your org's quota runs out. To stop recording, set the rate to 0. Session Replay Settings in Amplitude can also set a project's rate remotely, so check Settings > Organizational Settings > Session Replay Settings when the rate you see doesn't match your code. For every option, see the session replay plugin configuration; the Unified SDK accepts all of them inside sessionReplay except serverZone and instanceName, which go at the top level of the initAll options.

Guides and surveys initialize by default in the Unified SDK. This demo sets engagement: { skip: true } because it does not use them. Keep your current engagement configuration if your existing app does use them, and follow that SDK's CSP requirements.

3. Mask sensitive elements in Svelte components

Session replay masks every text input by default: typed characters arrive as asterisks. The project's default masking level, Medium, masks all form fields and text inputs and captures other text as-is. Everything else is your call, element by element.

The SDK recognizes three classes out of the box, amp-mask, amp-block, and amp-unmask, and they work on any element in Svelte markup. The data attributes registered in step 2 keep privacy separate from styling, and they're what the wrapper component below sets. Put one small component in charge of masking, so every page says it the same way. In Svelte 5, the wrapped content arrives as the children snippet:

<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';

  type Props = HTMLAttributes<HTMLElement> & {
    // Replace the content with a same-size placeholder instead of asterisks.
    block?: boolean;
    // Use 'span' inside inline content. Use a non-void element, never 'img' or 'input'.
    tag?: string;
    children: Snippet;
  };

  let { block = false, tag = 'div', children, ...rest }: Props = $props();
</script>

<svelte:element
  this={tag}
  {...rest}
  data-amp-mask={block ? undefined : ''}
  data-amp-block={block ? '' : undefined}
>
  {@render children()}
</svelte:element>

Use it in any page or component, next to plain data attributes where a wrapper would be overkill:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="#0052F2"/><circle cx="16" cy="12" r="6" fill="white"/><path d="M5 31c0-14 22-14 22 0" fill="white"/></svg>

<script lang="ts">
  import AmpMask from '$lib/components/AmpMask.svelte';

  type Member = { id: string; name: string; email: string; avatarUrl: string };

  // Replace with data from your load function.
  const members: Member[] = [
    { id: '1', name: 'Test User', email: 'test@example.com', avatarUrl: '/avatar.svg' },
  ];
</script>

<main>
  <h1>Team</h1>

  <!-- Inputs are masked by default. This one is safe to watch. -->
  <input data-amp-unmask name="filter" placeholder="Filter by name" />

  <ul>
    {#each members as member (member.id)}
      <li class="row">
        <!-- Replaced by a same-size placeholder -->
        <AmpMask block tag="span">
          <img src={member.avatarUrl} alt="" />
        </AmpMask>
        <span>{member.name}</span>
        <!-- Captured as asterisks -->
        <AmpMask tag="span">{member.email}</AmpMask>
      </li>
    {/each}
  </ul>
</main>

<style>
  .row {
    display: flex;
    gap: 0.5rem;
  }
</style>

Svelte renders a bare data-amp-unmask and the component's '' value as data-amp-unmask="" and data-amp-mask="", which the attribute selectors match. An undefined value leaves the attribute off. Both render on the server, so the attributes are in the HTML before the SDK starts.

Don't target the class names Svelte generates for scoped styles, such as svelte-1x2y3z, as masking selectors, in code or in Session Replay Settings. They're hashes produced at build time and change when the component's styles change, at which point the rule stops matching without any error.

When the masking rules in Session Replay Settings and the SDK disagree about an element, the settings page wins. You can change the project's level (Light, Medium, Conservative) or add selector overrides there, per project; see Manage privacy settings for session replay.

4. Mask whole routes with a nested layout

Some pages shouldn't show any text in a replay, such as billing, invoices, or a patient record. Masking each element there is how one gets missed. In SvelteKit, a +layout.svelte inside a route folder wraps every page beneath it, so one file covers a whole section:

<script lang="ts">
  import AmpMask from '$lib/components/AmpMask.svelte';

  let { children } = $props();
</script>

<!-- Everything rendered under /billing is masked, including pages added later. -->
<AmpMask>
  {@render children()}
</AmpMask>

Add two pages for the section, so there's text to check in the replay. If you already have billing pages, use those instead:

<h1>Billing</h1>
<p>Card ending 4242, billed to Test User</p>

<h1>Invoices</h1>

The root layout, entry point and routes needed for this demo are included in the complete setup and full code reference. In an existing app, keep its identity and sign-out code.

To mask several sections that don't share a URL prefix, such as /billing and /account, move them into a route group like src/routes/(masked)/ and put this layout at src/routes/(masked)/+layout.svelte. Group folders in parentheses don't change the URL.

The layout masks text, not structure. Clicks, scrolling, and layout still record, so you can follow what the user did on /billing without reading it. To hide the region entirely, use <AmpMask block> in the layout instead.

The layout doesn't cover the page <title>; keep personal data out of titles under /billing, or add data-amp-mask to the <title> in that section's <svelte:head>.

5. Allow Amplitude in your CSP

SvelteKit sends no Content-Security-Policy unless you configure one in kit.csp in svelte.config.js. Skip this step unless you did, or your host adds the header. If you did, add Amplitude's hosts to the connect-src directive you already have:

'connect-src': [
  'self',
  'https://api2.amplitude.com',
  'https://api-sr.amplitude.com',
  'https://sr-client-cfg.amplitude.com',
],

For a strict CSP, retain the policy your app needs and allow the complete endpoint set for its region. US connect-src: https://api2.amplitude.com https://api-sr.amplitude.com https://sr-client-cfg.amplitude.com. EU connect-src: https://api.eu.amplitude.com https://api-sr.eu.amplitude.com https://sr-client-cfg.eu.amplitude.com, with serverZone set to EU at the top level of initAll options. This demo explicitly sets useWebWorker to false. If your existing app enables it, allow worker-src blob: too. The demo skips guides and surveys; if your app enables them, also apply their documented CSP requirements. A blocked remote-configuration request prevents replay capture.

Verify it worked

Run pnpm dev, open http://localhost:5173 in a fresh private window, visit /team, type into the filter, open /billing, then check in this order:

1. Console and Network tab. No Content Security Policy errors in the console. In the Network tab, filter for amplitude: you should see event uploads to api2.amplitude.com returning 200, a request to sr-client-cfg.amplitude.com, and replay uploads to api-sr.amplitude.com. None of them start until the page loads in the browser; the server render sends nothing.
2. Ingestion Debugger. In Amplitude, click Data, select Sources, then open the Ingestion Debugger tab. The successful requests chart should show your event uploads. It shows counts, not individual events.

User lookup. Go to Users > User Profiles and search the device ID shown by the Instrumentation Explorer extension. Trigger an interaction after initialization and inspect its event properties for [Amplitude] Session Replay ID. Events appear in ten seconds to one minute; replays are generally available about five minutes after a session begins. A local-only test does not establish ingestion or playback.

1. Session Replay debug panel. Install the Instrumentation Explorer Chrome extension and turn on its Session Replay debug panel on your page. It floats over the page and shows the current replay ID, the session replay SDK and plugin versions, the sample rate, and the default and effective masking settings. A sample rate of 1 in development confirms step 2 took effect, and the effective masking settings show whether Session Replay Settings overrode your code.

The replay itself. Play it. On /team, the filter text is visible, emails are asterisks, and avatars are replaced by empty placeholders of the same size. The option applyBackgroundColorToBlockedElements shades those placeholders, but it is off by default. On /billing, text is masked while clicks and scrolling still show.

If the replay won't load, open the Ingestion Monitor from the top right of the Session Replay section of your project's Users & Sessions tab. It shows replay request statuses, including 429 throttling and 402 quota errors.

To force a fresh session while testing, delete the cookies that start with AMP_ in DevTools and reload.

Replays recorded against localhost can play back unstyled, because Amplitude can't fetch files from your machine. Check styling against a deployed preview.

Troubleshooting

No session replay requests at all

The effective sample rate is 0. Check sessionReplay.sampleRate, then the rate in Session Replay Settings; the debug panel shows the rate the SDK is using. A production build (pnpm build, then pnpm preview) has dev set to false and records only about one session in a hundred at 0.01, so test with pnpm dev or raise the rate temporarily.

Debug instrumentation during initial setup

For initial setup, debugMode: dev from step 2 adds the [Amplitude] Session Replay Debug event property, which contains a hash of your API key to help diagnose instrumentation issues such as mismatched apps. Current SDKs record without a focus check, including while DevTools is open. Keep debugMode disabled in production.

Events arrive but the session has no Play Session button

No event in that session carries [Amplitude] Session Replay ID. The usual cause is a second initAll or init call, for example in an onMount in a layout or page, so the replay and the events disagree on device or session ID. Search the codebase and keep the one in src/hooks.client.ts.

Masked text shows up in a replay

Check four things in order. The text sits in an attribute such as title or aria-label, which masking never covers. The data-amp-mask sits on a component tag and never reached the DOM; inspect the element, then wrap the content in AmpMask. The text renders through a portal into document.body, outside the masked wrapper. Or the element was unmasked in Session Replay Settings, which overrides the SDK; the debug panel's effective masking settings show it.

Old replays lose their styling after a deploy

SvelteKit writes CSS, including each component's scoped styles, to hashed file names under _app/immutable/, and a deploy that replaces the build output removes the old ones. Keep previous build assets available on your host, allow app.amplitude.com (US) or app.eu.amplitude.com (EU) in your asset server's CORS policy, and add crossorigin="anonymous" to any external <link rel="stylesheet">.

Requests fail with ERR_BLOCKED_BY_CLIENT

An ad blocker is dropping them. Session replay isn't compatible with ad blocking software, so test in a clean profile. For production traffic, route requests through your own domain and point trackServerUrl and configServerUrl at it, and set serverUrl in the analytics block for events, plus remoteConfig.serverUrl for remote configuration, as on the web analytics page.

No requests to Amplitude at all, or the build fails with "PUBLIC_AMPLITUDE_API_KEY is not exported"

The key is empty or missing, so the warning from step 2 is in the console, or $env/static/public can't find it at build time. The variable must start with PUBLIC_, and the dev server only reads .env at startup, so restart it. The value is baked in at build time; set it in your build environment and rebuild.

Full code reference

Every file needed for the standalone demo is included below. Split the block at its filename comments. For an existing app, merge changes into its files and keep any existing authentication, identity, routes and other Amplitude configuration.

// -- src/hooks.client.ts --
import type { ClientInit } from '@sveltejs/kit';
import { dev } from '$app/environment';
import { PUBLIC_AMPLITUDE_API_KEY } from '$env/static/public';
import * as amplitude from '@amplitude/unified';

export const init: ClientInit = () => {
  if (!PUBLIC_AMPLITUDE_API_KEY) {
    console.warn('PUBLIC_AMPLITUDE_API_KEY is not set; analytics is off.');
    return;
  }

  void amplitude.initAll(PUBLIC_AMPLITUDE_API_KEY, {
    // This tutorial does not load guides and surveys. Keep your existing engagement setup if you use it.
    engagement: { skip: true },
    analytics: {
      autocapture: {
        attribution: true,
        pageViews: true,
        // Tracks [Amplitude] Start Session and End Session events.
        sessions: true,
        formInteractions: true,
        fileDownloads: true,
        elementInteractions: true,
      },
    },
    sessionReplay: {
      useWebWorker: false, // Explicitly use main-thread processing for this demo.
      // Fraction of sessions to record: every session in `vite dev`, 1% in a production build.
      sampleRate: dev ? 1 : 0.01,
      // Adds [Amplitude] Session Replay Debug with an API key hash. Initial setup only.
      debugMode: dev,
      // Selectors for the data attributes in steps 3 and 4.
      privacyConfig: {
        maskSelector: ['[data-amp-mask]'],
        blockSelector: ['[data-amp-block]'],
        unmaskSelector: ['[data-amp-unmask]'],
      },
    },
  });
};

// -- src/lib/components/AmpMask.svelte --
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';

  type Props = HTMLAttributes<HTMLElement> & {
    // Replace the content with a same-size placeholder instead of asterisks.
    block?: boolean;
    // Use 'span' inside inline content. Use a non-void element, never 'img' or 'input'.
    tag?: string;
    children: Snippet;
  };

  let { block = false, tag = 'div', children, ...rest }: Props = $props();
</script>

<svelte:element
  this={tag}
  {...rest}
  data-amp-mask={block ? undefined : ''}
  data-amp-block={block ? '' : undefined}
>
  {@render children()}
</svelte:element>

// -- src/routes/team/+page.svelte --
<script lang="ts">
  import AmpMask from '$lib/components/AmpMask.svelte';

  type Member = { id: string; name: string; email: string; avatarUrl: string };

  // Replace with data from your load function.
  const members: Member[] = [
    { id: '1', name: 'Test User', email: 'test@example.com', avatarUrl: '/avatar.svg' },
  ];
</script>

<main>
  <h1>Team</h1>

  <!-- Inputs are masked by default. This one is safe to watch. -->
  <input data-amp-unmask name="filter" placeholder="Filter by name" />

  <ul>
    {#each members as member (member.id)}
      <li class="row">
        <!-- Replaced by a same-size placeholder -->
        <AmpMask block tag="span">
          <img src={member.avatarUrl} alt="" />
        </AmpMask>
        <span>{member.name}</span>
        <!-- Captured as asterisks -->
        <AmpMask tag="span">{member.email}</AmpMask>
      </li>
    {/each}
  </ul>
</main>

<style>
  .row {
    display: flex;
    gap: 0.5rem;
  }
</style>

// -- src/routes/billing/+layout.svelte --
<script lang="ts">
  import AmpMask from '$lib/components/AmpMask.svelte';

  let { children } = $props();
</script>

<!-- Everything rendered under /billing is masked, including pages added later. -->
<AmpMask>
  {@render children()}
</AmpMask>

// -- src/routes/billing/+page.svelte --
<h1>Billing</h1>
<p>Card ending 4242, billed to Test User</p>

// -- src/routes/billing/invoices/+page.svelte --
<h1>Invoices</h1>

// -- package.json --
{
  "name": "sveltekit-session-replay",
  "private": true,
  "type": "module",
  "packageManager": "pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8",
  "scripts": {
    "dev": "vite dev",
    "build": "svelte-kit sync && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@amplitude/unified": "1.1.42",
    "@sveltejs/kit": "2.70.3",
    "svelte": "5.57.2"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "6.1.1",
    "@sveltejs/vite-plugin-svelte": "6.2.4",
    "vite": "7.3.7",
    "typescript": "5.9.3"
  }
}

// -- pnpm-workspace.yaml --
minimumReleaseAge: 10080
trustPolicy: no-downgrade

// -- svelte.config.js --
import adapter from '@sveltejs/adapter-auto';
export default { kit: { adapter: adapter() } };

// -- vite.config.ts --
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({ plugins: [sveltekit()] });

// -- tsconfig.json --
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler"
  }
}

// -- src/app.html --
<!doctype html>
<html lang="en">
  <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />%sveltekit.head%</head>
  <body data-sveltekit-preload-data="hover"><div style="display: contents">%sveltekit.body%</div></body>
</html>

// -- .env --
PUBLIC_AMPLITUDE_API_KEY=your-project-api-key

// -- src/routes/+layout.svelte --
<script lang="ts">
  let { children } = $props();
</script>
<nav>
  <a href="/">Home</a>
  <a href="/team">Team</a>
  <a href="/billing">Billing</a>
  <a href="/billing/invoices">Invoices</a>
</nav>
{@render children()}

// -- src/routes/+page.svelte --
<h1>Local replay demo</h1>
<p>Use the navigation to exercise the tutorial.</p>

// -- static/avatar.svg --
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="#0052F2"/><circle cx="16" cy="12" r="6" fill="white"/><path d="M5 31c0-14 22-14 22 0" fill="white"/></svg>

Hand it to your agent

Prefer to have Cursor, Claude Code, or Codex CLI do the wiring? This prompt points the agent at this page and pins the decisions that matter.

Follow https://amplitude.com/build/sveltekit-session-replay using only the complete setup and Full code reference on this page. Do not require another tutorial. Split the reference at filename comments and create every required file. For an existing app, merge additions and keep authentication, identity, routes and other instrumentation. Use the existing root component/layout file. Initialize Amplitude once in the init export of src/hooks.client.ts. Keep the empty-key guard and the existing ready-promise wrapper if present. Use development sample rate 1 and production 0.01, with debugMode enabled only in development. This option adds diagnostic information; current recording has no focus gate. Keep the masking selectors and do not place personal data in HTML attributes. Use the page's demo routes to exercise the behavior. Keep engagement.skip true for this demo, or retain the existing engagement configuration and its required CSP if the app uses guides and surveys. Check the full endpoint set for the selected region. Build the actual app and run its Verify steps; report build, local browser behavior and live service results separately. Do not claim ingestion or playback from a mocked test.

Frequently asked questions

Do I need to finish the product analytics tutorial first?

No. This page includes the setup and complete demo files. In an existing app, merge the additions into the SDK initialization you already have.

Does debugMode bypass a focus check?

Current SDK recording has no focus gate. debugMode adds a diagnostic event property containing an API key hash. Use it for initial setup and keep it off in production.

What can I verify without an Amplitude project?

You can check builds, navigation, DOM attributes and local browser behavior. Successful ingestion, replay playback and processed heatmaps need a configured project and separate verification.

What this unlocks

• Session replay sits on the same events as your charts: open a funnel step that ends at /billing and watch the sessions where users dropped, text masked.
• Heatmaps are built from session replays, so once heatmap capture is on for the project in Session Replay Settings, clicks and scrolls on /team aggregate without new code.
• Feature Experiment, bundled in @amplitude/unified, lets you filter replays by variant and see how people use a new version of /team.
• Guides and surveys, also bundled, can ask the users whose replays show a stall on /billing what they were looking for.

Next steps

Amplitude is the leading all-in-one analytics platform for building better products. Product and engineering teams use Amplitude to connect product analytics and web analytics with session replay, heatmaps, experimentation, feature flags, and guides and surveys in one unified workflow, with AI agents working across all of it. Learn how Amplitude is building self-improving products with Wave, helping teams turn product data into PRs.