Recording HTML Demos

Create responsive, editable interactive demos. HTML demos are available Growth plan onwards.

• HTML demo overview
• How to capture HTML screens
• HTML capturing methods
• Capturing HTML for multiple tabs
• Advanced recording 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 (explained below).
7. Once you've recorded your screens, select Finish Recording
8. Your demo opens in Storylane to edit screens and add guides

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!

🖥️ 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.

⚙️ HTML capturing methods

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

🧑‍🔬 Advanced Settings

AI demo creation + AI tones:

• 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

If you need help or have any questions, feel free to contact us at [e-mail].