# rrweb-player
> rrweb's replayer UI
Latest version **2.1.7** (published 2026-10-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install rrweb-player
pnpm add rrweb-player
yarn add rrweb-player
bun add rrweb-player
```
## Health
**Score 80/100 (A)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.1.7 |
| Published | 2026-10-02 |
| First published | 2018-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 20277 |
| Author | rrweb Core Team |
| Maintainers | juice10, yanzhen |
| Keywords | devtools, product-analytics, real-user-monitoring, rrweb |
## Links
- npm: https://www.npmjs.com/package/rrweb-player
- Repository: https://github.com/rrweb-io/rrweb
- Homepage: https://github.com/rrweb-io/rrweb#readme
- Issues: https://github.com/rrweb-io/rrweb/issues
- npm.io page: https://npm.io/package/rrweb-player
## Dependencies (3)
- [@rrweb/packer](https://npm.io/package/@rrweb/packer.md) ^2.1.7
- [@rrweb/replay](https://npm.io/package/@rrweb/replay.md) ^2.1.7
- [@tsconfig/svelte](https://npm.io/package/@tsconfig/svelte.md) ^1.0.0
## Recent versions
- 2.1.7 (latest) — 2026-10-02
- 2.0.0-alpha.20 (alpha) — 2026-02-03
- 2.1.6 — 2026-09-18
- 2.1.5 — 2026-09-17
- 2.1.4 — 2026-09-08
- 2.1.3 — 2026-09-08
- 2.1.2 — 2026-09-08
- 2.1.1 — 2026-07-21
- 2.1.0 — 2026-06-27
- 2.0.1 — 2026-06-03
- 2.0.0 — 2026-06-01
- 2.0.0-alpha.18 — 2024-12-06
- 2.0.0-alpha.17 — 2024-08-02
- 2.0.0-alpha.16 — 2024-06-25
- 2.0.0-alpha.15 — 2024-06-13
- … 66 more at https://npm.io/package/rrweb-player/versions
## README
# rrweb-player
## Overview
Use this package to get a feature-rich playback UI out of the box; if you want to build your own UI use the [@rrweb/replay](../../packages/replay/README.md) package.
This is the same replayer used in the [cloud dashboard](https://app.rrweb.com/), if you want to try out a replay of your website, you can sign up and make a quick recording using the 'Test record any webpage' bookmarklet.
## How is this different from `new Replayer()`?
`new Replayer()` is from the more foundational [@rrweb/replay](../../packages/replay/README.md) package, which renders and rebuilds an rrweb event stream within an iframe. This package builds on that to provide UI in the form of play/pause controls and a timeline using the [Svelte](https://svelte.dev/) UI framework. The similar naming is unfortunate, and we aim to fix that in a future major version.
## Installation
### 1) Bundler / npm (Recommended)
```shell
npm install rrweb-player
```
```js
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
```
### 2) Browser Without Bundler (ESM)
```html
```
Use `current` for the latest stable release, or pin an exact version such as
`https://cdn.rrweb.com/rrweb-player/2.0.0/rrweb-player.js` for immutable
production URLs. See the [CDN assets docs](https://rrweb.com/docs/cloud/cdn-assets)
for the full URL shape and catalog.
### 3) Legacy Direct `
```
## Usage
```js
new rrwebPlayer({
target: document.body, // customizable root element
props: {
events,
},
});
```
## Options
| key | default | description |
| -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------- |
| events | [] | the events for replaying |
| width | 1024 | the width of the replayer |
| height | 576 | the height of the replayer |
| maxScale | 1 | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |
| autoPlay | true | whether to autoplay |
| speed | 1 | The default speed to play at |
| speedOption | [1, 2, 4, 8] | speed options in UI |
| showController | true | whether to show the controller UI |
| tags | {} | customize the custom events style with a key-value map |
| inactiveColor | #D4D4D4 | Customize the color of inactive periods indicator in the progress bar with a valid CSS color string. |
| ... | - | all the [rrweb Replayer options](https://github.com/rrweb-io/rrweb/blob/main/guide.md#options-1) will be bypassed |
## Methods on the rrwebPlayer component
```ts
addEventListener(event: string, handler: (params: any) => unknown): void;
```
```ts
addEvent(event: eventWithTime): void;
```
```ts
getMetaData() => {
startTime: number;
endTime: number;
totalTime: number;
}
```
```ts
getReplayer() => Replayer;
```
```ts
getMirror() => Mirror;
```
Toggles between play/pause
```ts
toggle();
```
Sets speed of player
```ts
setSpeed(speed: number)
```
Turns on/off skip inactive
```ts
toggleSkipInactive();
```
Triggers resize, do this whenever you change width/height
```ts
triggerResize();
```
Plays replay
```ts
play();
```
Pauses replay
```ts
pause();
```
Go to a point in time and pause or play from then
```ts
goto(timeOffset: number, play?: boolean)
```
Plays from a time to a time and (optionally) loop
```ts
playRange(
timeOffset: number,
endTimeOffset: number,
startLooping: boolean = false,
afterHook: undefined | (() => void) = undefined,
)
```
## 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
