# rrweb
**[(new!) rrweb cloud - hosted rrweb backend is now available](https://rrweb.com/)**
[](https://join.slack.com/t/rrweb/shared_invite/zt-41pxl6epj-~N2YyGQxvI5r3V6d59it8w)
[](https://twitter.com/rrweb_io)
[](https://www.reddit.com/r/rrweb)
[](https://cdn.rrweb.com/catalog.json)
[δΈζζζ‘£](./README.zh_CN.md)
rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
## Guide
[**π Read the rrweb guide here. π**](https://rrweb.com/docs/guide)
[**π³ Recipes π³**](https://rrweb.com/docs/recipes/)
[**πΊ Presentation:** Hacking the browser to digital twin your users πΊ](https://youtu.be/cWxpp9HwLYw)
## Project Structure
rrweb is composed of the following principal parts:
- **[rrweb-snapshot](packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM. This package can be used on it's own to provide a static HTML based 'screenshot' of the current web page state, with all Javascript deactivated.
- **[record](packages/record)**, builds on an initial snapshot to record all HTML state changes (mutations) and user interactions as the user browses the web page. Multiple page loads can be chained together into a single recording.
- **[replay](packages/replay)**, rebuilds the inital snapshot and replays the list or stream of subsequent events to show a 'session replay'
- **[rrweb-player](packages/rrweb-player/)**, a player UI on top of the replay package to provide GUI-based functions like pause, fast-forward, drag and drop to play at any time.
## Roadmap
- β [storage engine: do deduplication on a large number of rrweb sessions](https://rrweb.com)
- Token efficient AI session replay format (in progress)
- provide plugins via the new plugin API, including:
- XHR plugin
- fetch plugin
- GraphQL plugin
- ...
## Internal Design
- [serialization](./docs/serialization.md)
- [incremental snapshot](./docs/observer.md)
- [replay](./docs/replay.md)
- [sandbox](./docs/sandbox.md)
## Contribute Guide
Since we want the record and replay sides to share a strongly typed data structure, rrweb is developed with typescript which provides stronger type support.
[Typescript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
For the latest setup, testing, and pull request workflow, see [Contributing to rrweb](./CONTRIBUTING.md).
In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
[Using the REPL tool](./guide.md#REPL-tool)
## Sponsors
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
### Gold Sponsors π₯
## Core Team Members
