Click & Record

Product demos · 4 min read

How to record a software demo: capture setup for web, desktop and dev tools

Published · Click & Record team

To record a software demo well, pick the smallest capture area that shows everything (a tab, a single window, or the full screen), set the screen to the resolution you'll export at, enlarge fonts so text survives compression, and rehearse with the exact data you'll show. That technical setup matters more than which recorder you use. This guide focuses on capture: getting web apps, desktop apps, terminals and multi-app flows onto video cleanly.

Choose what to capture

The capture source decides how much clutter makes it into your video and how readable the result is. Here's how to choose:

SourceBest forWatch out for
Browser tabWeb apps and SaaS where the whole demo lives in one tabPop-ups that open in new tabs or windows won't be captured
Application windowDesktop apps, IDEs, terminals, design toolsDialogs that open as separate windows may be missed
Full screen (display)Demos that jump between a browser, a terminal and a desktop appNotifications, dock, taskbar and other windows are all visible

A good default: use the narrowest option that still contains the whole story. For more on window and display capture in Chrome, see how to record a window or full screen in Chrome, and for tabs, how to record a Chrome tab.

Set resolution and scale before you record a software demo

Most demos are watched in a 16:9 player at 1080p or smaller, often on a laptop. If you record a 4K monitor at native size, the UI is tiny and the video gets scaled down until labels blur.

  • Match the export size. Resize the browser or app window to about 1920 by 1080 (or 1280 by 720 for a tighter look) before recording.
  • Zoom the UI. Browser zoom at 110 to 125 percent makes web apps much more readable without changing their layout much.
  • Enlarge code and terminal fonts. If you normally use 13px, try 18 to 22px for the demo. High-contrast themes survive video compression better than subtle ones.
  • Plan for vertical if you need it. If the same demo will be cut for phones, keep the important action near the center so a 9:16 crop still works.

Prepare the machine

Every demo setup checklist overlaps, but software demos have a few extra traps:

  1. Turn on Do Not Disturb so chat and calendar notifications don't appear, especially for full-screen captures.
  2. Use a demo profile. A separate browser profile with no bookmarks, extensions or autofill avoids leaking personal data.
  3. Pre-warm everything. Start dev servers, run the build once, open files in the IDE, and load the pages so caches are warm and nothing compiles on camera.
  4. Clear your terminal history or start a fresh shell so old commands and paths don't show.
  5. Stage the data. Have sample files, test accounts and inputs ready to paste. Typing long values live is where demos stall.
  6. Check your microphone level with a ten-second test recording.

Handle multi-app and developer-tool demos

Developer tools, integrations and APIs rarely live in one window. Common patterns:

Browser plus terminal

Arrange the two side by side on one display and record the full screen, or record two separate clips (one window each) and join them in the editor. Separate clips usually look cleaner and let you zoom into each one.

Code editor walkthroughs

Record the editor window only. Collapse sidebars you don't need, and scroll slowly. Pause on each important block for a beat so viewers can read it.

Integrations between two web apps

If the flow moves between tabs, record the window rather than a single tab so tab switches are captured.

General recording technique

  • Move the cursor deliberately and pause briefly before each click.
  • Narrate intent, not mechanics. "Now we connect the repo" beats "I'm clicking the blue button in the top right."
  • Record in chapters. Shorter clips are easier to retake. A recorder that lets you append clips makes assembling them simple.
  • Let results land. After a command finishes or a page loads, hold for two seconds.

Click & Record handles all three sources (tab, any app window, or the whole display) with optional mic and webcam, and has a 3-2-1 count-in that isn't recorded. It logs clicks inside web pages and turns them into zooms after recording, which helps with small UI. Be aware of one honest limit: an extension can only see clicks inside web pages, so clicks in a terminal or desktop app don't generate automatic zooms. You can add manual zooms on those moments in the editor, which is usually what you want for code anyway.

Edit, then export

Keep the edit simple:

  • Trim the start and end, and delete fumbles.
  • Speed up installs, builds and long-running commands instead of cutting them, so viewers see they're real.
  • Add captions; technical terms read better than they sound. Click & Record generates subtitles on your device, and you can correct cues for product names.
  • Use the browser frame's editable URL bar to swap a localhost address for your real domain.
  • Check the export dialog's resolution, bitrate and estimated file size before rendering. MP4 is the most compatible choice; see MP4 vs WebM.

Keep a recorded backup for live demos

If you're giving the demo live, on a sales call, at a meetup or in a conference talk, record it the day before. Live demos fail for boring reasons: hotel Wi-Fi, an expired token, a dependency that updated overnight. Having a clean recording ready means you can switch to it in seconds and keep talking over it. Many presenters play the recording by default and keep the live version for Q&A.

Summary

To record a software demo that people can actually read: choose the narrowest capture source, record at your export resolution with enlarged fonts, prepare the machine so nothing surprising appears, and record in chapters. For a longer guided tour built from those chapters, see product walkthrough videos. Click & Record does capture, zooms, subtitles and export in the browser, for free and without an account.

Frequently asked questions

Should I record a software demo in a tab, a window or the full screen?

Record a tab when everything happens in one web page, a window when you demo a desktop app or a terminal, and the full screen only when you need to move between several apps.

What resolution should I record a software demo at?

Record at the resolution you plan to export, commonly 1920 by 1080 for 16:9. A smaller browser window with larger text often reads better than a huge 4K desktop.

How do I make code and terminal text readable in a demo?

Increase the editor or terminal font size well beyond what you normally use, choose a high-contrast theme, and add zooms on the lines that matter.

Should I pre-record a demo for a live presentation?

It is a good safety net. Keep a recorded version ready so that a network failure or a broken build does not end your talk or sales call.