HTML Demo
Best for sales and marketing demos that require screen editing and personalization.
HTML demo recording overview
Storylane lets you record a pixel-perfect, no-code replica of your product’s screens - capturing the HTML and CSS behind each one. This makes it easy to fully customize your demo later, whether it's for personalizing logos, adding tokens, blurring sensitive elements or embedding media.
Example Use Case
Capture your product screens once and:
Swap logos for different prospects
Remove or blur confidential data
Add personalization tokens (e.g., {{FirstName}})
Insert media or adjust layout in the HTML editor
How to Capture HTML Screens
Open the product screen you want to capture.
Launch the Storylane Chrome Extension.
Click “Create New Demo” — or “Add to Existing Demo” if you already started one.
Select “Record HTML” mode.
Choose your preferred capture method (explained below).
Once finished, click “Finish Recording.”
Your flow opens in the HTML Editor for further customization. → Learn how to edit HTML captures
HTML capturing methods
There are 3 HTML capturing methods you can use, depending on your preferences:
Single Capture
Continuous Capture
Timed Capture
👉 Single Capture
For every page you want to capture, navigate to it and click "single capture"
Press “single capture” (Windows: Ctrl + Shift + S / Mac: Option (⌥) + S)
The capture count increased number on the left side
👉 Continuous Capture
Automatically capture pages as you click through the product
👉 Timed Capture
Auto-capture 1 page at a time after a 3-second timed countdown
Advanced Settings (⚙️)
Click the Settings icon in the extension to toggle helpful features:
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
Add Guide on Capture (for Continuous Capture only)
Automatically places a tooltip guide where you click
Great for fast demo creation on the fly

Last updated