Editing HTML Demos
Storylane's HTML demos enable powerful code-free editing capabilities, made even better with AI
👉 Edit HTML elements + AI editing
HTML demos provide great control over demo environments, here's what you can edit:
Edit text - Select any text element and make inline edits
Replace Images - Select logos/images and update media straight from your library
Graphs / Charts - Edit graphs and charts when they are captured in SVG format.
AI editing - Need help editing your HTML demo? Just prompt our AI editor to make it happen — no developer dependency needed.
👉 Anonymize Elements
Need to anonymize certain aspects of your product screens? Here are a few ways to go about it:
Blur elements - Click on any element and blur the content — useful to protect sensitive data/PII
Hide elements - Useful if you want to remove an element but don't want the screen to auto-align. This also gives you the option to "un-hide" the element at a later point.
Delete elements - Remove elements from your screen and auto-adjust screen alignment.
👉 Embed Content
Customize your demos by embedding external content
Click on the element you would like to embed with new content
Select "Embed content" in the menu and pick your content. We support:
Videos / GIFs / Audio / PDFs
Media players (Youtube/Vimeo/Loom, etc), maps, charts, etc.
👉 Global Search & Replace
Search and replace will list the total matches found on each screen allowing you to verify and replace them.
Select the "Search Content" 🔍 icon in the tool bar
Enter search and replace with strings
Review and confirm the replacement
👉 Typewriter Effect
The typewriter effect in the HTML demo enhances the viewing experience by mimicking real-time writing, creating more interactive and engaging demos for users.
Select the text element you'd like to add the effect to
Click on the 3-dots menu
Select Typewriter Effect
Confirm your typing speed
Hit save and you're set
👉 Text Triggers
Adding a text trigger to an HTML demo is a great way to engage your user and demonstrate your product. There are two ways to add them based on your use case - in the guided experience, or the clickable experience.
Try Interactive Demo Yourself 👇
👉 Copy / Paste Elements
A handy feature to quickly clone or replace your HTML elements
Select on the desired element and click on the three dots
Select "Copy Element"
Select the element you would like to update
And select "Paste Element".
👉 Screen interactions
HTML Editor Glow-Up! Now you can jazz up clickable areas with custom colors to make them pop against your product's interface. Give your UI a fresh, eye-catching look with just a few tweaks!
Last updated