Editing Screens
Customize captured screens
HTML Demo
Screenshot Demo
Only when a demo is captured using "Record HTML" screens will be editable. HTML Demo is available starting from the Growth Plan.
👉 To start, open the HTML demo and switch to "EDIT" mode in the Editor mode.
- 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 👇
- 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 👇
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 👇
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 👇
Click on 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.
- Click on "Blur Screen" in the Demo Editor > Draw a region to blur on the image > Hit the "Save" button
- Click on "Replace Background" > Choose the relevant screen > Select the "Replace" Button
- At Storylane, you can choose between dark and light modes in your demo:
- Navigate to the select mode button > select the desired 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.
Last modified 1mo ago