gitmyhub

rrweb

TypeScript ★ 20k updated 19h ago

record and replay the web

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.

TypeScriptnpmyarnDOM APIssetup: easycomplexity 3/5

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.

Where it fits