Build interactive demos from real product sessions

Capture a working product flow as structured DOM events. Your customers can cut it into steps, add hotspots and branches, then publish the demo under their own brand.

Start free with Cloud Read the open-source docs
demo studio · onboarding tour

Storyboard

01Welcome
02Create project
03Choose source
04First event
Step 02 · Create projectautosaved
app.acme.com/new-project
Click to continue
hotspotbranch → SDK setup

Demo and visual-capture products built with rrweb.

Capture the real product as editable source

Serialization turns the live product into a portable browser event stream. Text, layout, and event timing stay available to your editor as the author shapes the demo.

  • Keep every captured screen as structured DOM state.
  • Use event timestamps as exact cut points between steps.
  • Preview edits against stable snapshots of the real interface.
demo editor · onboarding

Edit the story, keep the product

Welcomeintro
Create projectclick
Choose sourcebranch
First eventfinish

Turn one recording into guided paths

Add step copy, hotspots, branch rules, and forms around the captured interface. The same player can power the editor preview and every published version.

  • Cut a full session into reusable steps and segments.
  • Route hotspots through your own branching and form logic.
  • Publish the viewer with your branding, analytics, and calls to action.
demo editor · guided path
Step 03 · Choose your setup2 hotspots
app.acme.com/get-started
01Use the SDKdeveloper path
02Connect my siteno-code path

On click

Hotspot 01Go toSDK setupStep copyInstall the package

Let AI turn a session into the first draft

The rrweb event stream gives AI the DOM structure, text, interactions, and timing behind a session. Models can turn that machine-readable context into a draft demo for an author to review.

  • Find meaningful steps from clicks, route changes, and DOM mutations.
  • Draft instructions from the element label and surrounding page context.
  • Place hotspots and suggest alternate paths from one captured workflow.
ai copilot · draft from recording

onboarding-v3

38 events · 00:42

Generate draft
app.acme.com/new-project
02click · button “Create”
01Name your projecttext + focus
02Create the projectclick + mutation
03Choose a sourceroute change
5 steps3 hotspots2 branchesready to edit

Keep capture separate from the authored demo

rrweb captures and reconstructs the browser state. Your platform stores steps, hotspots, branches, and analytics beside it, so authors can change the story without changing the recording format.

01 / 03flow onboarding_v3

Capture the source

Record the real product state and interactions as portable browser events.

02 / 03path founder · 6 steps

Store the narrative

Your editor keeps steps, copy, hotspots, and branch rules beside the source recording.

03 / 03demo.customer.com

Render the viewer

The published experience combines replay with your brand, interaction layer, and analytics.

Choose the backend that fits your product

Use managed infrastructure or operate the replay pipeline yourself.

Start with rrweb Cloud

Use managed recording storage and replay delivery while your platform owns authoring, branching, and the published viewer.

rrweb Cloud uses 80% less bandwidth and storage.

Start free Contact sales

Build on open source

Keep capture, editing assets, published demos, and viewer analytics inside your own platform and storage stack.

Read the docs

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.

What makes DOM recording useful for a product demo?

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 choose rrweb as the capture layer for a demo platform?

rrweb supplies the recording and replay primitives for a demo product you are building. Your platform owns the editor, branching, analytics, publishing, and brand. A packaged demo service supplies a finished editor and player with its own capture format and pricing.