# Recording HTML Demos

* [HTML demo overview](#html-demo-overview)
* [How to capture HTML screens](#how-to-capture-html-screens-now-with-ai)
* [HTML capturing methods](#html-capturing-methods)
* [Capturing HTML for multiple tabs](#how-to-capture-html-screens-from-multiple-tabs)
* [Advanced recording settings](#advanced-settings)

### 💻 HTML demo overview

With HTML demos, Storylane records a responsive, editable HTML/CSS replica of your product UI, including buttons, scrolls, and interactions — perfect to build personalized demo environments.

* Capture the look, feel, and interactions of the actual product
* Edit text, data, charts, graphics, and other HTML elements
* Edit HTML elements with AI prompts (no dev dependency) 
* Blur, edit, or delete sensitive/confidential data and PII
* Add text/image tokens to personalize demos at scale (for example: {FirstName}) 
* Insert media, adjust layouts, and add effects (typewriter, text triggers, etc.)

### 📸 How to Capture HTML Screens (Now with AI!)

1. Open the product screen you want to capture
2. Launch the Storylane Chrome extension
3. Select **“HTML”** under "Demo type"
4. Toggle "Add content with AI" to auto-generate guides
5. Select “Record new demo” (or “Add to existing demo”)
6. Choose your preferred [**capture method**](#html-capturing-methods) (explained below).
7. Once you've recorded your screens, select **Finish Recording**
8. Your demo opens in Storylane to edit screens and add guides

{% hint style="info" %}
Need a little help with storytelling? Let Storylane's AI help. Toggle "Add content with AI", select an AI tone, and click around to capture your product. We'll automatically generate contextual guides based on your clicks!
{% endhint %}

{% @storylane/embed subdomain="app" linkValue="d7h8qoqynzgn" url="<https://app.storylane.io/share/d7h8qoqynzgn>" %}

## 🖥️ How to capture HTML screens from multiple tabs?

Storylane captures the active tab. If you would like to capture HTML screens from multiple tabs:

1. Close the extension in current tab.
2. Go to another tab, open the extension and Choose "Add to Existing Demo"
3. Pick your recent demo and "start recording"
4. This will add screens from the new tab to same demo.

{% @storylane/embed subdomain="app" linkValue="cjq2jootr6yk" url="<https://app.storylane.io/demo/cjq2jootr6yk>" %}

### ⚙️ HTML capturing methods

Pick from three HTML capturing methods, based on your preference:

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FZrD7noRdLY8bvgkF6f1G%2Fimage.png?alt=media&#x26;token=1144f223-a578-4787-9a74-d78714801d41" alt="" width="375"><figcaption></figcaption></figure></div>

### 🧑‍🔬 Advanced Settings

**AI demo creation + AI tones**:&#x20;

* Toggle "Add content with AI" and pick a tone
* Storylane will generate contextual guide content based on your clicks

**Rename screens**

* Prompted to name each screen after capture
* Helps you stay organized in the editor

**Auto link screens**

* Automatically links buttons to the next captured screen
* Saves time when building click-through flows

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2Fw401XQOifUSBfsESZ6Xi%2Fimage.png?alt=media&#x26;token=49feeb65-da4d-4c75-a3b7-928c385b1838" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If you need help or have any questions, feel free to contact us at <support@storylane.io>.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.storylane.io/recording-demos/recording-html-demos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.