Editing HTML Screens

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".

If you made any mistake during the editing of your screen, you can click on the undo icon to revert changes.

👉 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!

If you need help or have any questions, feel free to contact us at [email protected].

Last updated