browser-replay — Open source session replay library for the browser

Record

Capture every DOM mutation, user interaction, and network event with a single function call.

npm install @browser-replay/record

import { record } from '@browser-replay/record';

let events = [];

const stop = record({
  emit(event) {
    events.push(event);
  },
});

// call stop() to end the recording

Replay

Play back any recorded session with a React player component — timeline, scrubber, and controls included.

npm install @browser-replay/player react react-dom

import { DomReplayPlayer } from '@browser-replay/player';
import '@browser-replay/player/dist/style.css';

<DomReplayPlayer
  events={events}
  autoPlay
/>

Or use the CDN — no build step required:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@browser-replay/core@latest/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/@browser-replay/core@latest/dist/core.umd.min.cjs"></script>

Key capabilities

Built for production use — privacy controls, extensibility, and full TypeScript support out of the box.

TypeScript-first

Full type definitions ship with every package. Works with ESM and CommonJS bundlers.

Privacy controls

Block, mask, or ignore any element using CSS classes — dr-block, dr-mask, dr-ignore. Passwords masked by default.

Plugin system

First-party plugins for console logs, sequential IDs, and canvas via WebRTC. Build your own with the plugin API.

Canvas & media

Optionally record <canvas> elements, inline images, and cross-origin iframes alongside DOM mutations.

Live mode

Stream events in real time for live collaboration, remote support, or co-browsing scenarios.

Video export

Convert any recorded session to video with @browser-replay/video — useful for sharing replays without a player.

What you can build

🐛

Bug reproduction

Attach a session replay to every bug report. Stop asking users to reproduce issues manually.

🧪

Test generation

Record real user flows and replay them as automated integration tests.

📊

UX research

Watch exactly what users see — hesitations, rage clicks, scroll depth — without guessing.

🔍

Incident analysis

Replay the exact sequence of events that led up to a production error.

Packages

Install only what you need. All packages are independently versioned.

Package	Description
`@browser-replay/core`	Record + replay in a single package — recommended for CDN usage
`@browser-replay/record`	Recording only — smaller bundle for apps that only need to capture sessions
`@browser-replay/replay`	Replay engine — minimal programmatic API without a UI
`@browser-replay/player`	React player UI with timeline, scrubber, and playback controls
`@browser-replay/player-core`	Framework-agnostic player logic — bring your own UI
`@browser-replay/snapshot`	DOM serialization and rebuilding — serialize page state to JSON
`@browser-replay/packer`	Compress and decompress event data to reduce storage size
`@browser-replay/video`	Convert recorded sessions to video files
`@browser-replay/web-extension`	Browser extension — record any page without changing its code

Plugin packages: plugin-console-record, plugin-console-replay, plugin-sequential-id-record, plugin-sequential-id-replay, plugin-canvas-webrtc-record, plugin-canvas-webrtc-replay. Additional utilities: @browser-replay/dom, @browser-replay/types, @browser-replay/utils.

Record and replayDOM interactions