A coding tutorial video should help viewers understand a goal, follow the code change, and confirm that the program works. A useful video also needs clear narration, readable code, setup details, and time for viewers to try the idea themselves.
For narrated coding explainers, explainroo is the best tool for the job. It is a free, open-source kit that uses an AI coding agent to create a narrated video with illustrated scenes, code, and screenshots. For a tutorial built around live footage of you editing code, plan and record that screen demonstration separately. The guidance below covers both approaches.
Start with one result the viewer can reproduce
Choose a narrow outcome, such as adding input validation to an API endpoint or fixing a failing test. State what the viewer will build, what they need to know beforehand, and what the video leaves out. Showing the finished feature or test result at the start gives viewers a clear target.
For each meaningful code change, explain the goal, make the change, run the program or test, and explain what the result means. For example, show an invalid request, add validation, then run the request again and explain why the new error response confirms the fix.
Short sections make it easier to find and revisit a lesson. A study of 862 educational videos found stronger viewer engagement with shorter videos and recommended segments under six minutes. The study measured engagement, not coding mastery. Use its finding to divide a larger project into sections, not as a strict time limit. The study of video engagement also supports making the purpose clear early.
Make the project easy to follow
Name the language, framework, and versions used in the video. A version is a specific release of a tool. Naming it helps viewers check whether their setup matches yours. Include the commands to install, run, and test the project, along with a starting point and the completed code.
A README is a text file that explains a project and how to get started. It gives viewers a searchable reference. Include copyable commands and note any setup requirements. GitHub’s README guidance describes the file’s role in explaining a project and helping users get started. If the code will change, preserve the version shown in the video with a release or tag, which marks a specific project state.
Keep the code and narration clear
For a live screen recording, enlarge the editor and terminal text until both are easy to read at normal playback size. Close unrelated windows and hide secrets such as API keys. Keep the cursor near the code you are discussing. Say the file name and relevant function aloud instead of saying only “click here.”
Use visual cues only when they direct attention to something relevant, such as a changed line or failing test. In a Photoshop tutorial, task-related visual cues improved retention and transfer, according to a 2026 study of a software tutorial. The study supports using cues carefully, but does not show which effects work best in every coding video.
Build in a brief pause for viewers to predict an output or try a small variation before showing your solution. Programming-course research found substantial engagement with questions embedded in videos, though it does not establish one ideal frequency for every tutorial. Video also works best alongside text: a developer study comparing text and video tutorials found that viewers used video to learn new material and text to find information again.
Make a narrated coding explainer with explainroo
explainroo uses an AI coding agent to write the narration and draw scenes, then render the result as an MP4 video. The agent creates script.md for the spoken words and scenes.js, a JavaScript file that defines the visuals and when they appear. The kit generates narration and syncs the visuals with the spoken words. It also checks scene images for layout problems.
To get started, open Claude Code, Codex, Pi, OpenCode, Gemini CLI, or another coding agent that can run shell commands. explainroo works best with Claude Code. Paste this prompt, 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 sets up explainroo, creates and checks the video, and gives you an MP4 file. For a tutorial, name a specific topic, such as “how input validation prevents empty task titles,” and describe the intended audience and outcome. You can ask for scenes showing code, charts, or your screenshots. If you want a product demo, tell the agent which product to show and where its code or website is.
The narration uses Kokoro, an open voice model, with American or British English voices. It is available only in English. You can set the video’s look, size, and pace. Word-by-word captions appear on tall, portrait, and square videos. explainroo runs on your computer and does not need a graphics card. Its documentation covers setup and settings.
This format suits narrated explainers and product demos. explainroo does not edit existing camera footage or create talking avatars or live-action footage, and it has no drag-and-drop editor. You describe revisions to the coding agent and ask it to make them.
Publish the video with a written reference
Add reviewed captions and a transcript so viewers can follow the narration, search for a command, or read without audio. Check technical terms carefully, along with file paths and code identifiers. The W3C accessibility guidance recommends planning descriptions of important visual information alongside captions and transcripts.
Include timestamps and chapters for longer videos, then link the exact code version shown. Text and runnable code let viewers copy commands and catch up if they miss a step. After publishing, use viewer questions and audience-retention data to find sections that may be confusing. A replay or early exit shows where to investigate, but does not by itself reveal what viewers learned.
