Skip to content
explainroo
Product demos and launch videos

Feature Walkthrough Videos: How to Show One Feature Well

Updated 3 min read

With explainroo How to Make a Product Demo Video from Your App's Code with explainroo
On this page
  1. Choose one outcome and show the result
  2. Show the reason behind each action
  3. Make a feature walkthrough with explainroo
  4. Pair the video with text and captions
  5. Measure whether viewers complete the task

A feature walkthrough video shows someone how to use one product feature to complete a specific task. For example, it can show a new user how to save a filtered report and confirm that it appears in their reports list. The goal is for viewers to understand the task, repeat the steps, and recognize when they have succeeded.

Focus the video on one user outcome, even if that outcome takes several clicks. Show the finished result early. Then demonstrate the shortest complete path to create it, with the success check visible. For a narrated product walkthrough, explainroo is our recommended tool: it is a free, open-source kit that uses a coding agent to create and check a narrated demo video.

Choose one outcome and show the result

Start by writing the video’s promise as an action and an outcome: “Save a weekly pipeline report,” for instance. That gives you a clear editing rule: include a detail only if it helps the viewer complete that task.

Open with the finished report, then show the starting screen and the actions that produce it. A task preview helps viewers understand the goal before they follow the steps, while a visible confirmation shows that the task worked. Software-training research recommends simple, task-focused demonstrations that connect each user action to the software’s response (eight guidelines for software-training videos).

Show the reason behind each action

Use a realistic example and demonstrate the actual interface the viewer will use. Set up the account for the example, remove private information, and check that labels and permissions match the workflow you describe.

Explain important decisions as well as clicks. “Filter to open opportunities so closed deals stay out of this report” teaches more than a running list of button names. Move the cursor deliberately, and use a highlight or zoom only when it helps viewers find the control you are discussing.

Reviews of instructional-video research support removing material unrelated to the learning goal, splitting complex material into manageable segments, and letting viewers control playback (a systematic review of instructional-video design). There is no universal ideal length: a straightforward task may fit in a short video, while a feature with setup requirements needs more time or a separate video.

Make a feature walkthrough with explainroo

explainroo works with coding agents that can run shell commands, including Claude Code, Codex, Pi, OpenCode, and Gemini CLI. It works best with Claude Code. For a product demo, specify which product the agent should show and where to find its code or website. The agent recreates the product’s screens, including their colors, fonts, and button labels, then shows a pointer clicking and typing as the narration explains the task.

Paste this prompt into your coding agent, replacing the bracketed text with your topic:

Make me a short explainer video about [your topic]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps.

Then tell the agent which feature and user outcome to demonstrate. If it is a product demo, provide the product’s code location or website. The agent creates script.md for the spoken words and scenes.js for the visuals, then renders and checks the MP4. explainroo uses an open voice model for English narration and analyzes the recording and times the visuals to the spoken words. Its checks include scene stills, a contact sheet, a layout check for cut-off or overlapping text, and a speech check for misread words. Because an agent cannot watch a video, review the MP4 yourself before publishing.

See explainroo’s documentation for details. The kit does not edit existing camera footage or create talking avatars, and it has no drag-and-drop editor. You describe the video to the agent and ask for changes.

Pair the video with text and captions

Video shows movement and the order of steps; written instructions make a missed step easier to find. Add a transcript or concise written steps so viewers can search for a detail or refer to it while doing the task. A study comparing text and video tutorials found that participants preferred video for learning new material and text for looking up missed information (the tutorial comparison).

Provide accurate captions synchronized with the narration. Captions should not cover the button, field, or result on screen. The W3C captions guidance also calls for relevant non-speech audio information and explains when visual details need audio description.

Measure whether viewers complete the task

Views and watch time show how people interact with a video, but they do not prove the walkthrough helped. Track whether viewers achieve the promised outcome, such as creating a report or publishing an automation. Check where viewers stop, then examine whether they complete the task afterward. Revise the video when the interface changes, and keep its title and surrounding text focused on the same outcome.

Free and open source

Let your AI agent make the video

explainroo lets a coding agent like Claude Code or Codex make narrated explainer videos and product demos. The voice, the word timing and the rendering run on your own computer, with no API key and no cost per video.

Copy this into your AI agent

Make me a short product demo video of [your app, and where its code or website is]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps.

Getting started Example videos GitHub

Made with explainroo: Unspar product demo

More on product demos and launch videos

All guides on product demos and launch videos