# rrweb-io/rrweb

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rrweb-io-rrweb).**

19,775 stars · 1,667 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/rrweb-io/rrweb
- Homepage: https://www.rrweb.io/
- awesome-repositories: https://awesome-repositories.com/repository/rrweb-io-rrweb.md

## Description

rrweb is a DOM session recording library and serialization framework used to record and replay web sessions. It converts the state of a web page into a serializable JSON data structure and tracks mutations to reconstruct user interactions within a replay engine.

The system distinguishes itself by using a sandboxed iframe for reconstruction to isolate replayed content, preventing script execution and form submissions. It ensures visual consistency through CSS inline-style flattening and provides sensitive data masking to prevent private information from being captured.

The project covers a broad range of capabilities, including user interaction tracking for mouse and keyboard events, mutation-based delta recording, and periodic snapshotting for timestamp seeking. It also includes tools for session analysis via server-side processing and a video exporter to transform recorded DOM data into standard video files.

## Tags

### Part of an Awesome List

- [Session Replay](https://awesome-repositories.com/f/awesome-lists/devops/session-replay.md) — Renders recorded snapshots and mutation events to recreate a web session exactly as it appeared to the user. ([source](https://github.com/rrweb-io/rrweb#readme))
- [Session Replay](https://awesome-repositories.com/f/awesome-lists/media/session-replay.md) — Renders recorded snapshots and events within a sandboxed environment to visualize a user's journey on a website.
- [Monitoring and Analytics](https://awesome-repositories.com/f/awesome-lists/devtools/monitoring-and-analytics.md) — Library for recording and replaying user sessions to debug issues.
- [Testing Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/testing-frameworks.md) — Record and replay web operations.

### User Interface & Experience

- [Session Recording](https://awesome-repositories.com/f/user-interface-experience/session-recording.md) — Provides a comprehensive system for capturing and replaying user interactions and DOM changes within a web interface. ([source](https://github.com/rrweb-io/rrweb#readme))
- [Inline Style Flattening](https://awesome-repositories.com/f/user-interface-experience/visual-styling-rules/inline-style-flattening.md) — Converts parsed CSS rules into inline styles to maintain page appearance regardless of stylesheet accessibility. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/serialization.md))
- [Playback Controls](https://awesome-repositories.com/f/user-interface-experience/playback-controllers/playback-automation/playback-controls.md) — Ships a graphical interface for managing session playbacks, including pause, fast-forward, and seeking controls. ([source](https://github.com/rrweb-io/rrweb#readme))
- [Session Playback Interfaces](https://awesome-repositories.com/f/user-interface-experience/playback-controllers/playback-automation/session-playback-interfaces.md) — Displays a graphical user interface with a timeline for navigating recorded web sessions. ([source](https://github.com/rrweb-io/rrweb/blob/main/guide.zh_CN.md))
- [Event Segmenting](https://awesome-repositories.com/f/user-interface-experience/session-recording-management/event-segmenting.md) — Groups recording events into segments based on time or count to facilitate partial data capture and recovery. ([source](https://github.com/rrweb-io/rrweb/blob/main/guide.md))
- [Viewport State Recording](https://awesome-repositories.com/f/user-interface-experience/viewport-change-callbacks/viewport-state-recording.md) — Records page scrolling and window resizing events to maintain the correct visual perspective during replay. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/observer.md))

### Data & Databases

- [DOM State Snapshots](https://awesome-repositories.com/f/data-databases/data-snapshotting/periodic-snapshots/dom-state-snapshots.md) — Provides periodic full DOM snapshots to allow jumping to any point in a recorded session. ([source](https://github.com/rrweb-io/rrweb/blob/main/guide.zh_CN.md))
- [State Snapshots](https://awesome-repositories.com/f/data-databases/data-snapshotting/state-snapshots.md) — Captures full serializable DOM trees at fixed intervals to allow random access seeking and playback recovery.
- [Server-Side Session Analysis](https://awesome-repositories.com/f/data-databases/server-side-session-analysis.md) — Provides tools for analyzing recorded session data using a virtual DOM implementation in a server environment. ([source](https://github.com/rrweb-io/rrweb/tree/main/packages))

### Development Tools & Productivity

- [DOM Mutation Tracking](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/dom-mutation-tracking.md) — Tracks DOM mutations and state changes to create a precise sequence for session playback. ([source](https://github.com/rrweb-io/rrweb/blob/main/README.zh_CN.md))
- [Session State Serializers](https://awesome-repositories.com/f/development-tools-productivity/session-capturers/session-state-serializers.md) — Converts the DOM and its current state into a serializable data structure for static representation. ([source](https://github.com/rrweb-io/rrweb/blob/main/README.md))

### Security & Cryptography

- [Iframe Sandboxing](https://awesome-repositories.com/f/security-cryptography/iframe-sandboxing.md) — Renders replayed content within a restricted iframe to prevent script execution and block unintended form submissions.
- [Data Masking](https://awesome-repositories.com/f/security-cryptography/sensitive-data-access-controls/data-masking.md) — Prevents private information from being recorded during session capture using CSS classes and field detection.
- [Sensitive Content Obscuration](https://awesome-repositories.com/f/security-cryptography/sensitive-data-access-controls/sensitive-content-obscuration.md) — Prevents specific HTML elements or text from being recorded using CSS classes or field detection. ([source](https://github.com/rrweb-io/rrweb/blob/main/guide.zh_CN.md))

### Software Engineering & Architecture

- [DOM to JSON Serialization](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-tools/internal-tree-representations/json-serializers/dom-to-json-serialization.md) — Transforms the DOM tree into a structured JSON format that preserves text, comments, and input values.
- [Mutation Delta Recording](https://awesome-repositories.com/f/software-engineering-architecture/mutation-delta-recording.md) — Tracks DOM changes via MutationObserver to record only incremental updates instead of full page snapshots.
- [Replay Timing Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/replay-timing-synchronization.md) — Uses a precise timing mechanism to replay asynchronous DOM mutations and user events at their original speed.

### System Administration & Monitoring

- [User Interaction Event Logging](https://awesome-repositories.com/f/system-administration-monitoring/user-interaction-event-logging.md) — Logs precise user interactions like mouse movements and keyboard inputs for behavioral analysis and reconstruction. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/observer.md))
- [User Interaction Recording](https://awesome-repositories.com/f/system-administration-monitoring/user-interaction-recording.md) — Logs mouse movements, keyboard input, and HTML changes for behavioral analysis.

### Testing & Quality Assurance

- [DOM Element ID Mapping](https://awesome-repositories.com/f/testing-quality-assurance/ui-element-interactions/dom-element-id-mapping.md) — Assigns persistent IDs to DOM elements to track mutations and interactions across different recording segments.
- [Visual Session Reproductions](https://awesome-repositories.com/f/testing-quality-assurance/bug-reproduction-scripting/shareable-reproductions/visual-session-reproductions.md) — Records the precise sequence of DOM changes and inputs that lead to an error for easier debugging.

### Web Development

- [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Records structural and attribute changes to the DOM via MutationObserver to reconstruct page state. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/observer.md))
- [Session Reconstruction](https://awesome-repositories.com/f/web-development/dom-mutation-observation/session-reconstruction.md) — Implements the reconstruction of a user interface from recorded DOM mutations and snapshots for playback. ([source](https://github.com/rrweb-io/rrweb/blob/main/packages/rrweb-snapshot))
- [DOM Node Reference Tracking](https://awesome-repositories.com/f/web-development/dom-node-reference-tracking.md) — Assigns unique identifiers to DOM nodes to map interactions and mutations without re-serializing the entire page. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/serialization.md))
- [DOM Serialization Frameworks](https://awesome-repositories.com/f/web-development/dom-serialization-frameworks.md) — Provides a utility that converts the current state of a web page into a serializable JSON data structure.
- [Baseline State Capture](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/baseline-state-capture.md) — Traverses the DOM to create a serializable data structure that preserves styles and input values for the recording baseline. ([source](https://github.com/rrweb-io/rrweb/blob/main/packages/rrweb-snapshot))
- [Visual Consistency Inlining](https://awesome-repositories.com/f/web-development/css-inlining/visual-consistency-inlining.md) — Ensures visual consistency during playback by converting parsed CSS rules into inline styles.

### DevOps & Infrastructure

- [Traffic-Replay Sandboxes](https://awesome-repositories.com/f/devops-infrastructure/sandboxing-environments/traffic-replay-sandboxes.md) — Renders recorded sessions within a sandboxed iframe to block form submissions and script execution. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/sandbox.md))

### Graphics & Multimedia

- [Playhead Seeking](https://awesome-repositories.com/f/graphics-multimedia/audio-music/audio-playback/playhead-seeking.md) — Allows starting playback from any timestamp by executing preceding snapshots before resuming asynchronous replay. ([source](https://github.com/rrweb-io/rrweb/blob/main/docs/replay.md))
- [JavaScript Playback APIs](https://awesome-repositories.com/f/graphics-multimedia/audio-music/media-capture-and-playback/media-playback-controls/javascript-playback-apis.md) — Provides a programmatic JavaScript API to control the playback process, including start, pause, and seek operations. ([source](https://github.com/rrweb-io/rrweb/blob/main/guide.md))
- [Video Export Pipelines](https://awesome-repositories.com/f/graphics-multimedia/design-to-image-exporters/image-export-to-file/video-export-pipelines.md) — Transforms recorded DOM session data into standard video files for viewing in external media players. ([source](https://github.com/rrweb-io/rrweb/tree/main/packages))