@rrweb/replay

Overview

This package contains all the necessary code to replay recorded events. See the replay section of the guide for more info.

This package handles basic replay, but leaves UI and controls up to you. For a pre-built UI check out the rrweb-player package.

Installation

1) Bundler / npm (Recommended)

npm install @rrweb/replay

import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

2) Browser Without Bundler (ESM)

Use the CDN-hosted @rrweb/replay browser asset when loading directly in the browser:

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/replay/current/dist/style.css"
/>
<script type="module">
  import { Replayer } from 'https://cdn.rrweb.com/replay/current/dist/replay.js';
</script>

Use current for the latest stable release, or pin an exact version such as https://cdn.rrweb.com/replay/2.0.0/dist/replay.js for immutable production URLs.

3) Legacy Direct <script> Include (UMD fallback)

Use this only for compatibility with non-module environments.

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/replay/current/dist/style.css"
/>
<script src="https://cdn.rrweb.com/replay/current/dist/replay.umd.cjs"></script>

The legacy UMD global is rrwebReplay.

Usage

import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

const replayer = new Replayer(events, {
  // options
});
replayer.play();

Notes

Currently this package is really just a wrapper around the Replayer class in the main rrweb package. All Replayer related code will get moved here in the future.

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site.

Gold Sponsors 🥇

Silver Sponsors 🥈

Bronze Sponsors 🥉

Backers

Core Team Members

Who's using rrweb?