A tutorial video teaches someone to complete a specific task, such as exporting a file or assembling a piece of furniture. A clear tutorial shows each key step, explains what to watch for, and shows viewers how to check their result.
Start with one task and plan the narration and visuals together. For narrated explainer videos and product demos, explainroo is my top tool recommendation: it is a free, open-source kit that uses a coding agent to create a video on your computer. It suits illustrated lessons and software demos; it does not edit existing camera footage or create talking avatars.
Choose one task and define success
Write down who the video is for, what they should do, and what success looks like. “Learn spreadsheet basics” covers too much. “Filter a spreadsheet to show overdue invoices and export the results” gives the tutorial a clear destination.
List any prerequisites, such as an account, sample file, tool, or safety equipment. If the task has several distinct parts, separate them into stages or videos so viewers can return to the step they need.
Match the narration to the action
Plan what viewers will hear alongside what they will see. For each step, name the action and show it. Point out the relevant control or object, then explain how to verify the result. Use exact labels: “Select Export, then choose PNG” is clearer than “Click here.”
Visual cues such as a brief highlight, arrow, or zoom help viewers find the relevant detail. Keep them close to the item they explain and remove decorative motion that competes for attention. Research reviews support using cues and matching narration to visuals to direct attention and reduce unnecessary mental effort (Mayer’s instructional-video principles).
Keep each section as short as the task allows, but do not treat six minutes as a universal limit. A study of videos in four online courses in 2012 found that viewers tended to engage less with longer videos; it measured viewing behavior, not whether they learned the task. Use meaningful sections and chapters when a procedure needs more time (the study’s findings).
Record and edit for clarity
For a screen demonstration, close unrelated tabs and silence notifications. Use sample data and enlarge small text. For a physical demonstration, keep the work surface clear. Frame small or delicate steps closely. In either format, make the narration clear and the visuals easy to read. These matter more than cinematic effects.
Cut loading time, mistakes, and detours, but leave enough time for viewers to inspect changes or try a step themselves. After an important action, show the expected result and invite viewers to pause and practice. Viewers need control to pause or revisit steps; watching to the end alone does not prove they can perform the task.
Make the video accessible and test it
WCAG 2.2 requires captions for prerecorded video with synchronized sound and picture when the video falls within its scope (WCAG 2.2). Review captions for accuracy and keep them from covering controls or results. Provide a transcript when practical, and say important menu names, actions, and visual changes aloud. “Select Settings in the left sidebar” gives more useful information than “Click over here.” W3C recommends planning spoken descriptions of important visual information as part of the narration (W3C guidance on visual description).
Before publishing, ask someone who does not know the task to follow the video without help. Watch for hesitation, mistakes, or questions, then revise the confusing step. After publication, use viewer questions and retention drop-offs to find possible trouble spots, but judge instructional success by whether viewers can complete the task.
Make a tutorial with explainroo
explainroo works with Claude Code, Codex, Pi, OpenCode, Gemini CLI, and other coding agents that can run shell commands. Its narrated videos use an open voice model with natural American and British English voices; narration is English only. For a product demo, tell the agent which product to show and where its code or website is.
Paste this prompt into your coding agent, replacing the bracketed topic:
Make me a short explainer video about [your topic]. Use explainroo for it: clone explainroo, read its AGENTS.md and follow the steps.
The agent writes script.md for the narration and scenes.js for the drawings. explainroo uses the narration timing to cue visuals, then assembles the video into an MP4. It also gives the agent scene stills and a contact sheet. It checks for cut-off or overlapping text and checks the speech. Those checks help catch issues, but a person should still review the finished video.
The kit offers paper, clean, chalk, blueprint, and midnight looks, plus wide, tall, portrait, and square formats. Tall, portrait, and square videos include word-by-word captions. Most features are free per video; optional AI illustrations cost extra through OpenRouter, and the coding agent is a separate service with its own pricing. See explainroo’s documentation and example videos.
