You can create an HTML demo in Storylane using one simple method - here’s how!
Using the Storylane Chrome Extension
Install the Storylane Chrome Extension.
Start Recording – Select HTML Demo in the extension.
Capture Interactions (choose a method):
Single Capture – Manually capture each screen when Capture is clicked
Continuous Capture – Automatically capture screens as you click.
Timed Capture – Capture each screen with a 3-second delay.
Pro Tip: Use keyboard shortcuts for faster recording:
Mac:
option ⌥ + s
Windows:
alt + s
🚀 Try Interactive Demo 👇
💡 Quick Tips!
Click Settings button to toggle 2 additional helpful features:
Rename Screens
Each time a screen is captured, you will be prompted to enter a name for that particular screen. This simplifies sorting through your screens in the Demo Editor, especially for larger demos.
Auto Link Screens
As you create your demo, this will ensure that the screens you capture are automatically linked to their respective buttons by default.
Shortcut Key to Highlight Links Once you capture and publish your HTML demo, you can use a shortcut key to find links in your published demo. Press “Ctrl” to instantly highlight all clickable links in blue color.