Editing HTML Screens

Only when a demo is captured using "Record HTML" screens will be editable. HTML Demo is available starting from the Growth Plan.

Once you've captured your HTML demo, you can start editing it. Open the HTML demo in the editor and switch to "EDIT" mode. You can do the following:

• Edit Content

• Anonymize Elements

• Embed Content

• Global Search & Replace

• Typewriter Effect

• Text Triggers

• Adding Labels

• Rename HTML Screens

• Copy/Paste Elements

• HTML AI Editing

• HTML Editor Improvement

Edit Content

• Change Text - Click on any text element and inline edit them.

• Replace Images - Click on logos or images and update them from the library.

• Graphs / Charts - You can edit graph and chart text when they are captured in SVG format. When you click on the elements you will get the option to edit.

Try Interactive Demo Yourself 👇

Anonymize Elements

• Blur Elements - Click on any element and blur the content. It's useful to hide any sensitive data.

• Delete Element - Will completely remove the elements from the screen and auto-adjust the screen alignment.

• Hide Element - It's useful if you don't want the screen to auto-align, and also provides the option to unhide the elements later.

Try Interactive Demo Yourself 👇

Embed Content

Click on the element you would like to embed with new content -> choose "Embed Content". List of different content that can be embedded:

• Video / GIF / Audio / PDF - upload various file types to make it interactive in the screen

• Any Embed - You can embed media players (Youtube/Vimeo/Loom...), maps, charts, etc.

Try Interactive Demo Yourself 👇

Global Search & Replace

Search for any text across all your screens quickly and replace them. It will list the total matches found on each screen allowing you to verify and replace them.

Try Interactive Demo Yourself 👇

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.

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 👇

Adding Labels

With the Labels feature, you can assign color-coded, customizable tags to your captured screens for easier grouping and filtering. Labels act like folders, staying attached to screens to simplify content organization and enhance efficiency when creating guides. Perfect for keeping demos well-organized and focused!

Try Interactive Demo Yourself 👇

Rename HTML Screens

Click on the 'Screens' tab to view the screens you've captured. Select the screen to rename -> three dots -> choose "Rename" -> change the name of the screen -> click the checkmark to save your changes.

Try Interactive Demo Yourself 👇

Copy / Paste Elements

Click on the element -> three dots -> choose "Copy Element" to copy to the clipboard. Then, you can choose the element you would like updated and select "Paste Element".

Try Interactive Demo Yourself 👇

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

HTML AI Editing

We’ve combined Edit HTML and HTML AI for a seamless, AI-powered editing experience. Use natural language to refine your HTML quickly and efficiently.

Best Practices

• Be specific: Clearly describe changes (e.g., "Center this text").

• Select smaller elements: Focus on sections for better accuracy.

HTML Editor Improvement

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!

Once you've captured your Screenshot demo, you can start editing it.

• Blur Screen

• Crop Screen

• Track & Zoom

• Replacing Background Screen

• Dark & Light Mode

• Fullscreen Mode

Blur Screen

• Click on "Screen Edit" in the Demo Editor, and then "Blur" > Draw a region to blur on the image > Hit the "Save" button. To undo a blur, click the "X" icon in the top-right corner of the blurred area.

Crop Screen

Click on "Screen Edit" in the Demo Editor, and then "Crop" > Select desired area to crop using crop handles > Hit the "Save" button. To redo the crop or revert to original, simply expand the crop handles to the initial area.

Tip: Keep the 'lock aspect ratio to match the demo size' box checked ☑️, to maintain the aspect ratio same as the demo size.

Track & Zoom

Track & Zoom in is a great way to direct your audience’s focus to specific parts of your product. To start:

Choose the screen you want to zoom into > From the left sidebar, select the Magnifying Glass icon > Position the guide (the beacon) on the area you want to zoom into > Finally, select a zoom amount by changing the Zoom percentage at the bottom of the highlighted area.

Replacing and updating the Background Screen

• Click on "Replace Background" > Choose the relevant screen > Select the "Replace" Button

Dark and Light Mode

• At Storylane, you can choose between dark and light modes in your demo:

  • Navigate to the select mode button > select the desired mode.

Fullscreen Mode

If you plan to showcase your screenshot demo in full-screen, check whether you have enabled a border for your demo. Follow these steps:

1. Open the demo for which you'd like to check the border.

2. Click on demo settings (gear icon at the top) > Frame color.

3. Ensure it's set to either light or dark.

4. Once this is set, republish the demo, open the URL of the demo, and click on the full-screen icon at the top to enter full-screen mode.