01 / 03record()
Open capture
The MIT-licensed recorder turns browser state into rrweb events.
Build your own embedded replay
Embed session replay in the product you already built
rrweb gives you the capture format and replayer. Your application keeps its own navigation, data model, permissions, and workflow around the playback experience, so replay ships as a feature you own instead of an iframe you embed from a session-replay SaaS.
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, timeline event, or search result.
- Synchronize console, network, transcript, or product metadata with playback.
- Load the player only when the user opens a recording to keep the main workflow light.
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.
- Use the bare replayer API or the packaged player UI as your starting point.
- Keep your own terminology and actions beside the playback surface.
- Plan separate capture for canvas, video, and cross-origin iframe content that the DOM recorder cannot access.
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.
- Apply tenant isolation before any recording data reaches the player.
- Use short-lived URLs or authenticated event endpoints instead of public object paths.
- Log playback access and apply the same retention rules as the parent record.
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.
Build on rrweb your way
The same open recorder works with your infrastructure or ours.
Own the full pipeline
Run capture, storage, indexing, authorization, and playback entirely behind your product’s existing infrastructure.
Use rrweb Cloud for replay
Use managed ingest, storage, and replay while keeping your product’s route, permissions, metadata, and user experience.
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.