To show how someone uses your app, use explainroo lets an AI coding agent turn your product’s code or website into a narrated demo video. The agent writes the narration and scene code. explainroo creates the voice, syncs the visuals with the narration, and renders an MP4 on your computer.
explainroo turns details from your product into editable, animated scenes, so you do not need to record a live session. It reconstructs screens from your app’s code or website. Compare the finished demo with the current product before publishing.
Choose one workflow to demonstrate
A short video works best when it follows one customer task from beginning to end, such as creating a report or inviting a colleague. Decide who the video is for, what outcome it should show, and which steps prove that outcome. A focused workflow gives the narration and visuals a clear path.
Give the coding agent current product information, such as a local code repository, relevant documentation, or a staging website. Provide approved brand assets and sanitized example data. Do not share production secrets, customer records, or unrestricted credentials.
Make the video with explainroo
explainroo is a free, open-source kit under the MIT license. It works with coding agents that can run shell commands, including Claude Code, Codex, Pi, OpenCode, and Gemini CLI. It works best with Claude Code. To start, give your agent the project’s recommended instruction, replacing the bracketed 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.
For a product demo, name the product and link the agent to its code or website. Describe the workflow and audience. Tell the agent to show only features customers can use today. Use wording from the product’s interface, and leave out unverified claims.
The agent creates two main files. script.md holds the spoken words, divided into scenes. scenes.js holds the JavaScript that draws and animates each scene. You can sync a scene action, such as changing the interface or clicking with the cursor, with a word in the narration.
The agent reconstructs screens using the product’s labels, colors, fonts, and layout as a guide. It then animates a pointer, typing, and clicks through the steps. Because the screens are reconstructions rather than recordings of a running app, they can differ from the live interface. Check each screen against the current product.
What happens during rendering
explainroo runs on your computer. Kokoro, an open voice model, reads the script aloud in an American or British English voice. Whisper, a speech-recognition tool, marks when each word is spoken so scene actions line up with the narration. Chrome draws frames on an HTML canvas, a surface for rendering graphics. ffmpeg combines the visuals, voice, music, and sound effects into an MP4.
To install it yourself, you need Node.js, ffmpeg, and Chrome or Chromium. The documented setup commands are:
git clone https://github.com/vincentsch/explainroo.git
cd explainroo
npm install
node bin/explainroo.js doctor --fetchThe first setup downloads the voice and timing models. The finished file is saved under videos/<name>/out/video.mp4. See the installation and project instructions for details.
Check the video before publishing
Ask the agent to generate still frames and a contact sheet. The contact sheet is a page of small frames that lets you scan the video’s visual flow. explainroo also checks for cut-off or overlapping text and whether the voice read the words correctly. These checks catch media problems, but they do not confirm that a feature exists or that a marketing claim is accurate.
Watch the final MP4 yourself. Confirm that the shown steps match the current product, labels are correct, sample data is safe, and every claim is approved. The agent instructions describe the project’s checks and emphasize using real product wording and customer-accessible features.
Know what explainroo does not do
Use explainroo for narrated demos made from reconstructed screens. It does not edit existing camera footage or create talking avatars or AI-generated live-action footage. It has no drag-and-drop editor, so you ask the coding agent to change the video files.
The core video workflow is free. Optional AI illustrations through OpenRouter cost money per image. The coding agent is a separate service with its own pricing. explainroo renders videos locally, but the coding agent’s data handling depends on the agent and its configuration.
