CI MIT License npm version TypeScript

Record and replay
DOM interactions

browser-replay is an open source TypeScript library for capturing and replaying browser sessions. Reproduce bugs exactly, generate tests from real user flows, and understand how your app behaves in the wild.

Get started View on GitHub

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.

Open source

browser-replay is released under the MIT License and built on the shoulders of rrweb. Contributions are welcome — open an issue, send a PR, or join the discussion on GitHub.

GitHub repo Issues Discussions Contributing