{"_id":"@candle-analytics/rrweb-player","name":"@candle-analytics/rrweb-player","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@candle-analytics/rrweb-player","version":"2.0.0","devDependencies":{"@candle-analytics/rrweb-types":"^2.0.0","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^7.0.0","@typescript-eslint/parser":"^7.0.0","eslint-plugin-svelte":"^2.37.0","prettier-plugin-svelte":"^3.1.2","svelte":"^4.2.14","svelte-check":"^3.4.3","svelte-preprocess":"^5.0.3","svelte2tsx":"^0.7.30","tslib":"^2.0.0","vite":"^5.3.1"},"dependencies":{"@candle-analytics/rrweb-replay":"^2.0.0","@candle-analytics/rrweb-packer":"^2.0.0","@tsconfig/svelte":"^1.0.0"},"scripts":{"dev":"vite build --watch","build":"vite build","prepublishOnly":"yarn build","start":"vite","check-types":"svelte-check --tsconfig ./tsconfig.json","prepublish":"yarn build","lint":"yarn eslint src/**/*.ts"},"description":"rrweb's replayer UI","main":"./dist/rrweb-player.umd.cjs","module":"./dist/rrweb-player.js","unpkg":"./dist/rrweb-player.umd.cjs","typings":"dist/rrweb-player.d.ts","exports":{".":{"import":{"types":"./dist/rrweb-player.d.ts","default":"./dist/rrweb-player.js"},"require":{"types":"./dist/rrweb-player.d.cts","default":"./dist/rrweb-player.cjs"}},"./dist/style.css":"./dist/style.css"},"type":"module","repository":{"type":"git","url":"git+https://github.com/candle-analytics/rrweb.git"},"keywords":["rrweb"],"author":{"name":"yanzhen@smartx.com"},"license":"MIT","bugs":{"url":"https://github.com/candle-analytics/rrweb/issues"},"homepage":"https://github.com/candle-analytics/rrweb#readme","_id":"@candle-analytics/rrweb-player@2.0.0","gitHead":"b7d790983495abb41b2cd0d7cc5699654447cd26","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-s0AQYex6Cxb1Z2zl5nVV6E2dXlT7d09zA17s3Oc4+Vm89FLRgqihAVj0YwsZyMZvgJdllzFKdm2LtfGh0DNIsg==","shasum":"28d7a57302ee37e323642bc5aa8bc487e2e6ea6c","tarball":"https://registry.npmjs.org/@candle-analytics/rrweb-player/-/rrweb-player-2.0.0.tgz","fileCount":17,"unpackedSize":5253480,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHFxyRbcOKLRIewwDfegxixaxbbSi7Z/CeFvEfd1VbXpAiEA3aETULbkLX4Ye0Em/P1HOme0ZRvZjeEdOg+y0dVoCNE="}]},"_npmUser":{"name":"elsbree","email":"renegadelsbree@gmail.com"},"directories":{},"maintainers":[{"name":"elsbree","email":"renegadelsbree@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rrweb-player_2.0.0_1756831976584_0.8790076173645225"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-02T16:52:56.490Z","2.0.0":"2025-09-02T16:52:56.803Z","modified":"2025-09-02T16:52:57.114Z"},"maintainers":[{"name":"elsbree","email":"renegadelsbree@gmail.com"}],"description":"rrweb's replayer UI","homepage":"https://github.com/candle-analytics/rrweb#readme","keywords":["rrweb"],"repository":{"type":"git","url":"git+https://github.com/candle-analytics/rrweb.git"},"author":{"name":"yanzhen@smartx.com"},"bugs":{"url":"https://github.com/candle-analytics/rrweb/issues"},"license":"MIT","readme":"_Looking for a Vue.js version? Go here --> [@preflight-hq/rrweb-player-vue](https://github.com/Preflight-HQ/rrweb-player-vue)_\n\n---\n\n# rrweb-player\n\nSince rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.\n\n## How is this different from `rrweb.Replayer`?\n\nrrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.\n\n## Installation\n\nrrweb-player can also be included with `<script>`：\n\n```html\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css\"\n/>\n<script src=\"https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs\"></script>\n```\n\nOr installed by using NPM：\n\n```shell\nnpm install --save rrweb-player\n```\n\n```js\nimport rrwebPlayer from 'rrweb-player';\nimport 'rrweb-player/dist/style.css';\n```\n\n## Usage\n\n```js\nnew rrwebPlayer({\n  target: document.body, // customizable root element\n  props: {\n    events,\n  },\n});\n```\n\n## Options\n\n| key            | default      | description                                                                                                         |\n| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| events         | []           | the events for replaying                                                                                            |\n| width          | 1024         | the width of the replayer                                                                                           |\n| height         | 576          | the height of the replayer                                                                                          |\n| maxScale       | 1            | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited                                                |\n| autoPlay       | true         | whether to autoplay                                                                                                 |\n| speed          | 1            | The default speed to play at                                                                                        |\n| speedOption    | [1, 2, 4, 8] | speed options in UI                                                                                                 |\n| showController | true         | whether to show the controller UI                                                                                   |\n| tags           | {}           | customize the custom events style with a key-value map                                                              |\n| inactiveColor  | #D4D4D4      | Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.                |\n| ...            | -            | all the [rrweb Replayer options](https://github.com/rrweb-io/rrweb/blob/master/guide.md#options-1) will be bypassed |\n\n## methods on the rrwebPlayer component\n\n```ts\naddEventListener(event: string, handler: (params: any) => unknown): void;\n```\n\n```ts\naddEvent(event: eventWithTime): void;\n```\n\n```ts\ngetMetaData() => {\n    startTime: number;\n    endTime: number;\n    totalTime: number;\n}\n```\n\n```ts\ngetReplayer() => Replayer;\n```\n\n```ts\ngetMirror() => Mirror;\n```\n\nToggles between play/pause\n\n```ts\ntoggle();\n```\n\nSets speed of player\n\n```ts\nsetSpeed(speed: number)\n```\n\nTurns on/off skip inactive\n\n```ts\ntoggleSkipInactive();\n```\n\nTriggers resize, do this whenever you change width/height\n\n```ts\ntriggerResize();\n```\n\nPlays replay\n\n```ts\nplay();\n```\n\nPauses replay\n\n```ts\npause();\n```\n\nGo to a point in time and pause or play from then\n\n```ts\ngoto(timeOffset: number, play?: boolean)\n```\n\nPlays from a time to a time and (optionally) loop\n\n```ts\nplayRange(\n    timeOffset: number,\n    endTimeOffset: number,\n    startLooping: boolean = false,\n    afterHook: undefined | (() => void) = undefined,\n  )\n```\n\n## Sponsors\n\n[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.\n\n### Gold Sponsors 🥇\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n\n</div>\n\n### Silver Sponsors 🥈\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n\n</div>\n\n### Bronze Sponsors 🥉\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n\n</div>\n\n### Backers\n\n<a href=\"https://opencollective.com/rrweb#sponsor\" rel=\"nofollow\"><img src=\"https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36\"></a>\n\n## Core Team Members\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <a href=\"https://github.com/Yuyz0112\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/13651389?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Yuyz0112</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/YunFeng0817\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/27533910?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Yun Feng</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/eoghanmurray\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/156780?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>eoghanmurray</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/Juice10\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/4106?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Juice10</b></sub>\n        <br /><sub>open for rrweb consulting</sub>\n      </a>\n    </td>\n  </tr>\n</table>\n\n## Who's using rrweb?\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <a href=\"http://www.smartx.com/\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://www.rrweb.io/logos/smartx.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://www.rrweb.io/logos/posthog.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://statcounter.com/session-replay/\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://statcounter.com/images/logo-statcounter-arc-blue.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://recordonce.com/\" target=\"_blank\">\n        <img width=\"195px\" alt=\"Smart screen recording for SaaS\" src=\"https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg\">\n      </a>\n    </td>\n  </tr>\n    <tr>\n    <td align=\"center\">\n      <a href=\"https://cux.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"The first ever UX automation tool\" width=\"195px\" src=\"https://cux.io/cux-logo.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://remsupp.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Remote Access & Co-Browsing\" width=\"195px\" src=\"https://remsupp.com/images/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://highlight.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"The open source, fullstack Monitoring Platform.\" width=\"195px\" src=\"https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://analyzee.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions.\" width=\"195px\" src=\"https://cdn.analyzee.io/assets/analyzee-logo.png\">\n      </a>\n    </td>\n  </tr>\n  <tr>\n    <td align=\"center\">\n      <a href=\"https://requestly.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Intercept, Modify, Record & Replay HTTP Requests.\" width=\"195px\" src=\"https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://gleap.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"In-app bug reporting & customer feedback platform.\" width=\"195px\" src=\"https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://uxwizz.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Self-hosted website analytics with heatmaps and session recordings.\" width=\"195px\" src=\"https://github.com/UXWizz/public-files/raw/main/assets/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://www.howdygo.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Interactive product demos for small marketing teams\" width=\"195px\" src=\"https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg\">\n      </a>\n    </td>\n  </tr>\n</table>\n","readmeFilename":"README.md","_rev":"1-2b63f483a8027c74a5160a79022f3b89"}