01 / 03record()
Capture a flow
Record the real product state and interactions as portable browser events.
Build your own demo platform
Build an interactive demo platform on rrweb
rrweb turns a real product session into portable DOM data. Your editor cuts that recording into steps, adds guidance and branches, then publishes a replay that stays crisp at every viewport size. A demo SaaS rents you its player; rrweb hands you the capture and replay primitives to own the whole product.
demo studio · onboarding tour
Storyboard
01Welcome
02Create project
03Choose source
04First event
Step 02 · Create projectautosaved
app.acme.com/new-project
Click to continuehotspotbranch → SDK setup
Public rrweb usage in demo and visual-capture products.
Edit the flow without rebuilding the product screen
Serialization turns the live page into portable data. The replayer reconstructs it through deserialization, while your editor trims idle time, labels interactions, and chooses where each step begins.
- Keep text and layout sharp because the recording stores structured DOM state.
- Seek to exact event timestamps when an editor sets a step boundary.
- Use snapshots as durable checkpoints for previewing and publishing edits.
demo editor · onboarding
Edit the story, keep the product
Welcomeintro
Create projectclick
Choose sourcebranch
First eventfinish
Layer choices on top of one captured flow
rrweb playback is visual and sandboxed. A demo product adds the interactive layer: hotspots, branch logic, forms, and navigation between captured segments.
- Reuse a common opening sequence across role-specific or industry-specific paths.
- Route a hotspot to another replay segment without dispatching events into the captured page.
- Keep analytics and lead capture in the host product, separate from the replay iframe.
demo paths · source choice
One capture can split into paths
developer
choose SDK
copy snippet
send event
marketer
choose no-code
connect site
publish
Publish the demo wherever the buyer already is
Embed the replayer in a landing page, docs site, sales room, or your own application. The same embedded replay layer can power the editor preview and the published viewer.
- Control playback, seeking, and speed from your own UI.
- Load only the segment needed for the current step or branch.
- Apply your branding and responsive layout around the sandboxed replay.
embedded demo · docs
your-site.com/product-tour
step 3 of 6
The replayer sits inside your page with your controls and surrounding copy.
Separate product capture from demo authoring
rrweb handles the browser representation. Your platform owns the editor, narrative, hotspots, branching, analytics, and publishing workflow that turn a recording into a demo.
02 / 03step 3 of 6
Author the demo
Trim segments, add copy, place hotspots, and connect alternate paths.
03 / 03<Demo />
Publish anywhere
Embed the sandboxed replay inside the page and workflow you control.
Build on rrweb your way
The same open recorder works with your infrastructure or ours.
Own the full pipeline
Keep capture, editing assets, published demos, and viewer analytics inside your own platform and storage stack.
Use rrweb Cloud for replay
Use managed recording storage and replay delivery while your platform owns authoring, branching, and the published viewer.
Frequently asked questions
Can rrweb create an interactive product demo by itself?
rrweb records and visually replays the product session. A demo platform adds hotspots, branch logic, narration, lead capture, and publishing around that replay. The captured page itself stays sandboxed.
Why use DOM recording for a demo instead of video?
DOM recording preserves structured text and layout, stays sharp at different pixel densities, and gives the editor event-level timestamps. Canvas, video, and cross-origin iframe content need separate capture strategies.
Can viewers click inside the replay?
The replayer simulates recorded interactions visually and does not dispatch them into the captured page. Your demo layer can place clickable hotspots above the replay and route those clicks to another step or segment.
How do I update a demo after the product changes?
Record the changed flow again or replace only the affected segment, depending on how your editor models steps. Keeping capture separate from narration and branch metadata makes targeted replacement possible.
Can the demo be embedded under my brand?
Yes. rrweb supplies the recording and replay primitives. Your application controls the domain, navigation, typography, controls, analytics, and surrounding interface.
Why build on rrweb instead of a packaged demo SaaS?
A demo SaaS gives you its editor and player on its own domain, priced per seat or per demo, with captures in a format only it renders. rrweb gives you the recording and replay primitives, so you own the editor, branching, analytics, publishing, and brand end to end. Choose the SaaS when you want a ready-made tool; choose rrweb when the demo product itself is what you are building.