> Capture the real HTML of your app with the LiveDemo Chrome extension, so text and images stay sharp and editable after recording.

Canonical: https://livedemo.ai/docs/capture-a-livedemo/html-demos/

# 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](https://livedemo.ai/docs/edit-a-livedemo/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](https://livedemo.ai/docs/edit-a-livedemo/edit-html-content/) and [Blur and hide data](https://livedemo.ai/docs/edit-a-livedemo/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](https://livedemo.ai/docs/capture-a-livedemo/screenshots-and-video/).
- Fonts or images blocked by the demo's security policy can be allowed in [Content Security Policy](https://livedemo.ai/docs/edit-a-livedemo/content-security-policy/).

---

Next: [AI Recording](https://livedemo.ai/docs/capture-a-livedemo/ai-recording/)