01 / 03record()
Open capture
The MIT-licensed recorder turns browser state into rrweb events.
Add session replay inside your product
Open replay from the issue, account, run, or metric your customer is already viewing. Your route, controls, permissions, and product language stay around it.
your product · /issues/BR-1842
acme.devIssueReplayConsoleNetwork
replay · app.acme.com/checkout
<Replayer />00:42 / 02:18
Synced context
issueBR-1842
tenantacme_eu
eventcoupon.500
scopereplay:read
Control playback from your own interface
The rrweb replayer exposes the controls your product needs: play, pause, seek, speed, resize, and events that keep surrounding panels synchronized.
- Jump to a timestamp from an error, ticket, or timeline.
- Sync console, network, transcripts, or metadata with playback.
- Load the player only when a recording opens.
player api · React
Control playback from your product
player.play() // start
player.goto(42000) // seek
player.setSpeed(2) // speed
player.addEventListener() // sync
Host controls synchronized
Make the player feel native to your product
rrweb reconstructs the captured page inside a sandboxed iframe. Your application supplies the route, panels, controls, keyboard behavior, and visual system around it.
- Start with the replayer API or packaged player UI.
- Keep your terminology and actions beside playback.
- Capture canvas, video, and cross-origin iframes separately.
player surface · white label
The replay belongs in your interface
rrweb supplies
DOM rebuild
cursor path
timeline
you supply
navigation
branding
workflow
Keep authorization in the system that owns the user
A recording id identifies data. Resolve tenant and role access on your backend before you issue a short-lived playback response or proxy the event stream through your own API. Apply data masking before those events leave the recorded page.
- Enforce tenant isolation before events reach the player.
- Use short-lived URLs or authenticated event endpoints.
- Log playback access and apply the parent record’s retention.
playback request · authorized
Your backend decides who can watch
tenant tenant_42
recording rec_8241
scope replay:read
expires 300s
Short-lived playback URL issued
Use rrweb as a layer, not a destination
The recorder produces typed browser events. Your infrastructure stores and indexes them. The replayer can sit inside a bug report or interactive demo, inside the workflow and authorization boundary you control.
02 / 03recordingId
Your data layer
Store recordings beside your tenant, issue, run, or customer model.
03 / 03<Replayer />
Native playback
Embed the replayer in your own route with your controls and permissions.
Choose the backend that fits your product
Use managed infrastructure or operate the replay pipeline yourself.
Start with rrweb Cloud
Use managed ingest, storage, and replay while keeping your product’s route, permissions, metadata, and user experience.
rrweb Cloud uses 80% less bandwidth and storage.
Build on open source
Run capture, storage, indexing, authorization, and playback entirely behind your product’s existing infrastructure.
Frequently asked questions
Can I embed rrweb replay in a commercial product?
Yes. The rrweb recorder and replayer are MIT-licensed, which permits commercial use and modification. Check the licenses of any additional packages or backend components you adopt.
Is there a session replay API, or do I self-host?
Both paths use the same rrweb recording format. You can self-host the recorder, storage, API, and replayer, or use rrweb Cloud for managed ingest and replay delivery while your product keeps its own route, permissions, and metadata.
Can I white-label the rrweb replayer?
Yes. The MIT-licensed replayer can be modified and placed inside your own interface. Your product controls the domain, typography, navigation, playback controls, and surrounding workflow. Check the licenses of any additional packages or backend components you use.
Does replay execute the captured application?
No. The replayer rebuilds the recorded DOM in a sandboxed iframe and simulates the recorded cursor and interactions visually. It does not rerun the original application scripts or network requests.
How should my product authorize a recording?
Resolve the signed-in user, tenant, and required scope on your server before returning recording data. Use short-lived URLs or authenticated endpoints and log access where recordings contain personal data.
Why rrweb over a packaged replay SaaS?
A packaged product gives you replay on its domain, priced per seat or per session, reachable mostly through its own UI. rrweb gives you the open recorder, event format, and replayer, so playback ships as a native feature of your product, on your route, behind your permissions, in your storage. Choose the SaaS when a separate app is enough; choose rrweb when replay has to be part of what you ship.