Links

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.

Editing 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 👇

Copy / Paste Elements

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.

Blurring Screen

  • Click on "Blur Screen" in the Demo Editor > Draw a region to blur on the image > Hit the "Save" button

Replacing and updating 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. 1.
    Open the demo for which you'd like to check the border.
  2. 2.
    Click on demo settings (gear icon at the top) > Frame color.
  3. 3.
    Ensure it's set to either light or dark.
  4. 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.