> For the complete documentation index, see [llms.txt](https://docs.storylane.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.storylane.io/recording-demos/recording-html-demos.md).

# 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.

{% embed url="<https://demo.storylane.com/share/qz3kocn7htof>" %}

### ⚙️ HTML capturing methods

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

<div align="left"><figure><img src="/files/YG4tRgZtnFGE5YSzkzPT" 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="/files/BiNJxmlNEH5SBUXCBL2G" 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.