Ctrlk
Contact Support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Guided Screenshot & Video Demos

Turn screenshots and videos into interactive walkthroughs — no coding required.

What are Screenshot/Video Demos?

Screenshot and video-based demos transform static visuals — screenshots, images, slides, Figma designs, or recorded videos — into interactive step-by-step walkthroughs. Unlike static slides, these demos capture real actions like typing, dragging, and scrolling, making them feel much closer to a live product experience.

👉 See an example Guided Screenshot/Video Supademo below:

spinner

How to Create a Screenshot/Video Demo

Setup Tips and recommendations prior to recording:

  1. Record using Google Chrome. Chrome is the best-supported browser for demo recording.

  2. Refresh the page prior to recording by re-loading (command+R). Stale pages that have been inactive for 20+ minutes may lead to unexpected issues.

  3. Record at full width and height (or with 1280x800 dimensions) on a laptop for an ideal viewing experience. Recording on large monitors may lead to small UI elements or illegible text.

  4. Close unnecessary tabs (especially in the same Chrome window). Having lots of tabs open is a surefire way to slow things down and can impact capture speed.

Using the Chrome Extension

  1. Open the Supademo Chrome Extension, select "Guided Screenshot Demo", and click “Start Recording.”

  2. Click through your product or workflow — Supademo will capture each click and action.

  • Text descriptions are generated automatically for every step.

  1. When finished, open the extension and click “Stop Recording" to instantly create your interactive demo.

For Mobile Apps

  • Use the desktop app to record your mobile app or emulator.

  • Or, screen record on your phone and upload video into Supademo.

  • After uploading, split the video into multiple steps to make it interactive.

Benefits of Screenshot/Video Demos

  • Simple and fast — no coding or setup required

  • Works with any visual asset: screenshots, images, video, or Figma designs

  • Auto-generated step text reduces manual editing

  • Captures keystrokes and gestures (typing, scrolling, dragging)

Best Use Cases

  • Product tutorials & onboarding

  • Process documentation

  • Sales presentations

  • Training materials

  • Feature announcements

  • Design prototypes (via Figma plugin)

PreviousManual Capture for HTML RecordingsNextSmart blur

Last updated

Was this helpful?