explaingit

rrweb-io/rrweb

📈 Trending19,575TypeScriptAudience · developerComplexity · 3/5ActiveLicenseSetup · easy

TLDR

TypeScript library that records everything a user does in a browser, clicks, scrolls, text input, DOM changes, and plays it back as a perfect replay without needing a video.

Mindmap

mindmap
  root((rrweb))
    What it does
      Records DOM changes
      Captures user interactions
      Plays back sessions
      Lightweight replays
    How it works
      Snapshot module
      Mutation tracking
      Replay engine
      Sandboxed playback
    Use cases
      Debug user issues
      Session replay analytics
      UX research
      Understand user behavior
    Tech stack
      TypeScript
      DOM APIs
      npm packages
    Audience
      Developers
      Product teams

Things people build with this

USE CASE 1

Debug hard-to-reproduce bugs by replaying exactly what the user did in their browser session.

USE CASE 2

Run UX research by watching how real users interact with your product without asking them to explain.

USE CASE 3

Build session replay analytics tools that let product teams understand confusing user behavior.

USE CASE 4

Understand why users abandoned a flow by replaying their exact clicks, scrolls, and form inputs.

Tech stack

TypeScriptnpmyarnDOM APIs

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

rrweb (record and replay the web) is a TypeScript library that captures everything a user does in a browser and saves it in a format that can be played back later as a perfect video-like replay. Unlike a screen recording tool that captures raw pixels, rrweb records the structure of the web page itself, the DOM (the tree of elements that makes up a webpage) and every change to it, along with user interactions like clicks, scrolls, and typed text. This makes replays lightweight and accurate, similar to how tools like FullStory, Hotjar, and LogRocket work. The library is split into three coordinated packages. The snapshot module takes a serializable picture of the page's DOM at the moment recording starts, giving each element a unique ID. The main rrweb library then tracks all mutations, every time the page changes, like an element appearing or disappearing, text updating, or a style changing, and records those changes with timestamps. The replay module reads that recorded sequence and rebuilds the mutations step by step in a sandboxed environment, reconstructing exactly what the user saw. A separate player package provides a user interface for playback with controls like pause, fast-forward, and scrubbing to any moment in the session. Developers and product teams use rrweb to debug hard-to-reproduce user issues, understand confusing user behavior, run UX research, or power session replay analytics tools. It is written in TypeScript and installed via npm or yarn.

Copy-paste prompts

Prompt 1
Show me how to set up rrweb to start recording user sessions in my React app and save the recordings.
Prompt 2
How do I use rrweb's replay module to play back a recorded session in a sandboxed environment?
Prompt 3
What's the difference between rrweb's snapshot and mutation modules, and when would I use each one?
Prompt 4
Help me integrate rrweb into a session replay analytics dashboard so I can watch user sessions with play/pause controls.
Prompt 5
How do I serialize and store rrweb recordings so I can retrieve and replay them later?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.