Explainroo UI: Make Animated Explainer Videos in Your Browser, Free and Open Source

Explainroo UI is a visual web studio for making animated technical explainer videos, and it asks nothing of you except a script. It turns system architectures, developer workflows, distributed systems, and code algorithms into narrated videos with hand-drawn vector animation, word-synchronized triggers, and one-click recording. It is built as the visual front end for the Explainroo programmatic video engine, and it runs entirely in your browser on Windows, Mac, and Linux. It is free and open source under the MIT license, and it has 28 stars on GitHub. The pitch is simple: explaining a technical idea usually means opening a video editor, a slide deck, and a screen recorder, then spending an afternoon stitching them together. Explainroo UI replaces that with a canvas, a script, and a record button. You write what you want to say, you point at the words where something should appear, and the studio does the timing, the narration, and the export.

The creation flow has three steps, and the second one is the whole idea. First, you paste your voiceover script into the editor, or you let the built-in AI Director write one for you. Second, you click any spoken word in your script, for example browser, database, or cloud, and attach a diagram component to it. That element animates onto the canvas at the exact split second the word is spoken. Third, you preview the video with synchronized voiceover narration and background music that ducks itself under the voice, then you record and export. The word-level synchronization is what makes the videos feel made rather than assembled. A server rack slides in as you say server, an arrow draws itself as you say sends, and the viewer never wonders what you are talking about, because the picture arrives with the word. Before you record, it is worth tidying the script: an AI Text Cleaner strips the filler and formatting junk out of a pasted draft, and if you are choosing between two versions of a script, a Text Diff shows exactly what changed between them. The studio coordinates narration text, speech audio, and vector animation into one synchronized 16:9 canvas, so there is no timeline to scrub and no keyframes to set by hand.

If you do not have a script yet, the built-in AI Director writes one. Give it any software topic or repository and it generates a complete multi-scene explainer video project using Google Gemini, with the narration broken into scenes and ready to attach visuals to. The AI Director is optional, and it needs your own Gemini API key, which you add to a .env file as GEMINI_API_KEY. Without a key, everything else still works: you paste your own script and build the video by hand. That split is a good design choice. The free core of the tool never phones home and never asks for an account, and the AI feature is a door you open yourself if you want it. The README is upfront that the key is yours and the cost is yours, which is the honest way to ship an AI feature in a free tool.

Every video gets its look from one of four visual themes, switched with a single click. Whiteboard is warm cream paper with slate ink strokes, made for system design and architecture tutorials. Dark Tech is a deep midnight canvas with glowing neon cyan schematics, built for cloud architecture and microservices. Blueprint is navy engineering paper with crisp white drafting lines and grid measurements, made for low-level protocols and compiler internals. Chalkboard is a classroom slate with soft textured chalk strokes and pastel highlights, made for computer science algorithms and math. All four render with Rough.js, which gives the strokes their natural pencil wobbles, marker edges, and cross-hatch fills, so the diagrams look hand-drawn rather than clip-art. The component library covers the pieces a technical explainer actually needs: architecture nodes like a client laptop, server rack, database, cloud and DNS cluster, API gateway, and message queue; UI mockups like a macOS browser window with a live URL bar, a Unix terminal with an active prompt, and a mobile smartphone viewport; infrastructure icons for Redis cache, auth bearer tokens, edge CDNs, and end users; and dynamic connectors, hand-drawn straight and curved animated arrows with request and response labels.

The audio engine is doing more work than it looks like. Narration comes from in-browser speech synthesis with control over rate, pitch, and voice, or you can upload your own voiceover as an MP3 or WAV file per scene, with live playback preview. The captions are Whisper-style dynamic subtitles in a floating pill that highlights the active spoken word in glowing yellow without covering the canvas, so a viewer watching on mute still follows the argument word by word. The background music is generative ambient harmonic chords that lower their own volume whenever the narrator speaks, which is the audio ducking the README promises, and it means you never have to mix two tracks by hand. The whole studio is also an installable Progressive Web App with responsive touch controls and offline precaching, so it works on a phone as well as a desktop. Keyboard shortcuts keep the flow fast: space toggles playback, Alt plus an arrow key jumps between scenes, and Escape closes any modal.

When the video is ready, you have four ways out. The direct one is WebM or MP4 video, recorded in the browser with zero external dependencies, ready for YouTube, X, LinkedIn, and product demos. The clever one is the standalone offline HTML player: a single .html file with every scene, vector animation, subtitle, and voice synthesis embedded, which plays anywhere with a double-click and no dependencies at all. The developer one is the headless CLI bundle, a zip containing the standalone player, a project JSON file, the script as script.md, and the scenes as scenes.js, compatible with the Explainroo command line renderer. And the simple one is a PNG poster frame, a high-resolution 1280x720 snapshot of the canvas for documentation, thumbnails, and blog posts. You can also save and reload the full project state as a JSON backup at any time. The roadmap lists a drag and drop timeline, neural text-to-speech voices from ElevenLabs and Edge, cloud persistence, hardware-accelerated WebAssembly export, and a logo library for Docker, Kubernetes, AWS, React, Python, and PostgreSQL, but what ships today already covers the full job from script to finished video.

You do not need Git or a command line to run Explainroo UI. Download the studio zip from the releases page, extract it, and on Windows double-click start.bat, or on macOS and Linux run ./start.sh. The launcher installs dependencies and opens your browser at localhost:3000 automatically. Developers can clone the repo and run npm install followed by npm run dev instead, with Node.js 18 or newer. The Gemini key is the only optional setup, copied from .env.example to .env. That is the whole install, and it is the reason the tool is worth knowing about: the gap between wanting an explainer video and having one is usually a day of editing, and here it is a download and a script. For anyone who teaches, documents, or demos technical ideas, that is a real difference.