HTML demos

An HTML demo captures the page code instead of pictures. Screens stay sharp at any size, and you can change text, swap images and blur data after recording.

Record

1. Open the page where your workflow starts.
2. Open the LiveDemo extension and set Type to HTML Demo.
3. Click Start recording and click through the workflow.
4. Click the LiveDemo icon to stop. The demo opens in a new tab.

Base and Delta screens

HTML screens are named after their page URL. To keep demos light, LiveDemo stores:

• a Base screen: a full snapshot of the page;
• Delta screens: only what changed after each click, applied on top of the Base.

You'll see the Base or Delta badge in the Screens tab. A Base can't be deleted while Deltas depend on it. To make a Delta independent, open its menu and click BaseMerge. This creates a new Base from that Delta.

Edit after capture

Click Edit in the toolbar to change any element. See Edit page content and Blur and hide data.

Limits

• Content that loads from your servers after a click (live charts, maps, embedded videos) may not replay. Capture those screens as Screenshots + Video.
• Fonts or images blocked by the demo's security policy can be allowed in Content Security Policy.

Next: AI Recording