Recording HTML Demos
Create responsive, editable interactive demos. HTML demos are available Growth plan onwards.
💻 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!)
Open the product screen you want to capture
Launch the Storylane Chrome extension
Select “HTML” under "Demo type"
Toggle "Add content with AI" to auto-generate guides
Select “Record new demo” (or “Add to existing demo”)
Choose your preferred capture method (explained below).
Once you've recorded your screens, select Finish Recording
Your demo opens in Storylane to edit screens and add guides
⚙️ 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
Last updated