🟢 Beginner–Intermediate ⚙️ Type: AI Video Generator / CLI Tool 💸 Free & Open Source (Apache-2.0) ⭐ 52 GitHub Stars
What is html-video?
html-video is an open-source tool that turns a simple text description — or even just a link to an article or GitHub repo — into a real MP4 video file, all on your own computer.
You type (or paste) what you want. An AI coding agent reads your request, picks a visual template, builds animated HTML frames, and then renders everything into a proper video using your local browser and a video encoder called ffmpeg. No monthly fees. No cloud rendering. No watermarks.
Think of it like this: you talk to an AI assistant in a browser window, it builds the video behind the scenes, and you download an MP4 when it’s done.
It comes with 21 ready-made templates covering data charts, glitch title cards, cinematic hero shots, product promos, explainer slides, and more.
Who is it for?
- Content creators who want to turn blog posts or articles into short video clips automatically
- Developers and coders who use AI coding agents like Claude Code, Cursor, or Codex
- Social media managers who need fast animated video for Instagram Reels, YouTube Shorts, or LinkedIn
- Data journalists and analysts who want to animate charts or data stories quickly
- Open-source enthusiasts who want to explain a GitHub project as a video
- Anyone who wants to create professional-looking videos without paying per render or learning video editing software
What makes it special?
- Paste a link, get a video — give it a URL (article, GitHub repo, or just a prompt) and it builds the video from real content, not a generic template
- Runs 100% on your machine — no cloud, no per-render fees, no data sent to a third party (except an optional soundtrack feature)
- 21 license-clean templates — every template is cleared for commercial use, no legal headaches
- Works with 6 different AI agents — Claude Code, Cursor Agent, Codex CLI, Hermes, Open Design (Vela), or just a raw Anthropic API key
- Multi-frame storyboarding — it doesn’t just make a single slide; it builds a full multi-scene video with proper pacing
- Optional AI soundtrack — add background music or narration using MiniMax AI, mixed directly into the MP4
- Apache-2.0 license — fully free, no seat limits, no contributor agreements
- Browser studio + command-line — use the visual studio in your browser, or script it from the terminal
Requirements before you start
Before installing, make sure you have these on your computer:
- Node.js (version 18 or higher) — download here
- pnpm — a fast package manager (different from the default npm). Install it by running:
npm install -g pnpm - ffmpeg — a free video encoder. Download here and make sure it’s available in your terminal
- Google Chrome or Chromium browser — the tool uses it in headless (invisible) mode to record your video frames
- At least one AI agent OR an Anthropic API key:
- If you have Claude Code, Cursor, or Codex installed — it will detect them automatically
- If not, just get an Anthropic API key and paste it into the studio settings
- Git — to clone the project from GitHub
- 4 GB free disk space — for the project, dependencies, and rendered videos
💡 Tip: Not sure if you have these? Open your terminal (Mac: search “Terminal”, Windows: search “Command Prompt” or “PowerShell”) and type
node --version,ffmpeg -version, andgoogle-chrome --versionto check.
Step-by-step installation
Step 1 — Install pnpm (if you haven’t already)
Open your terminal and run:
npm install -g pnpmThen check it worked:
pnpm --versionYou should see a version number like 9.x.x.
Step 2 — Clone the html-video repository
This downloads the project to your computer:
git clone https://github.com/nexu-io/html-video.git
cd html-videoStep 3 — Install all dependencies
This installs everything the project needs (it may take 1–2 minutes):
pnpm installStep 4 — Build the project
pnpm -r buildWait for this to finish. You’ll see build output scrolling by — that’s normal.
Step 5 — Run the doctor check
This checks that all your tools (ffmpeg, Chrome, AI agents) are detected correctly:
node packages/cli/dist/bin.js doctorYou’ll see a list of what’s found and what’s missing. Fix any missing tools before moving on.
Step 6 — Start the studio
node packages/cli/dist/bin.js studioThis starts a local web server. You’ll see a message like:
Studio running at http://127.0.0.1:3071Open that link in your browser (Chrome is recommended).
Step 7 — Set up your AI agent or API key
In the studio, look at the top bar for the agent switcher. If you have Claude Code, Cursor, or Codex installed, it will already appear there. If not:
- Click the Settings icon
- Find the Anthropic API Key field
- Paste your key (starts with
sk-ant-...) - Save — you’re ready to go
Step 8 — Create your first video
- In the studio, browse the template gallery and click one you like
- In the chat box, describe what you want — for example: “Make a 30-second explainer video about how solar panels work”
- Or paste a URL: “Turn this article into a video: https://example.com/article”
- The AI agent will build the storyboard, fill in the content, and show you a preview
- Edit any frame text you want to change
- Click Export MP4 — your video renders locally and downloads automatically
Optional: Add AI music or narration
If you want background music or a voiceover mixed into your video:
- Get a free MiniMax API key
- Go to Settings → Audio in the studio
- Paste your MiniMax key
- In your project’s Soundtrack panel, describe the music mood or type a narration script
- Export — music and voice will be mixed into the final MP4 automatically
Common errors and fixes
| Error | What it means | How to fix it |
|---|---|---|
pnpm: command not found | pnpm is not installed | Run npm install -g pnpm first |
ffmpeg: command not found | ffmpeg is missing or not in your PATH | Download ffmpeg from ffmpeg.org and add it to your system PATH |
Chrome not found | The tool can’t find Chrome or Chromium | Install Google Chrome, or install Chromium. On Mac you may need to run: brew install --cask chromium |
No agent detected | No AI coding agent found and no API key set | Add your Anthropic API key in Settings → the studio will use the API directly |
Build failed / TypeScript error | Node.js version is too old | Run node --version. If it shows v16 or lower, upgrade to Node.js 18 or higher from nodejs.org |
Port 3071 already in use | Something else is already running on that port | Close other local servers, or restart your computer and try again |
| Video renders but has no sound | MiniMax key not configured | Add your MiniMax API key in Settings → Audio. Audio is optional — the rest works without it |
| Article URL doesn’t load content | The page may require a login | The tool can only fetch publicly accessible pages. Try copying the article text into the chat box instead |
Free vs Paid comparison
| Feature | html-video (Free) | Paid Video AI Tools |
|---|---|---|
| Cost per video | $0 (renders locally) | $5–$50+ per month |
| Monthly render limits | Unlimited | Often capped (e.g. 20–100/month) |
| Watermark | None | Often on free tiers |
| Your data stays private | ✅ Yes — runs on your machine | ❌ Sent to cloud servers |
| Commercial use | ✅ Apache-2.0 — fully allowed | Varies — check licence carefully |
| Requires technical setup | ⚠️ Yes — Node.js, ffmpeg, Chrome | ❌ No — browser only |
| Customisable templates | ✅ Yes — full HTML/CSS control | Limited to built-in options |
| AI agent integration | ✅ 6 agents supported | Usually none |
| AI soundtrack | ✅ Via MiniMax API (BYOK) | Sometimes included |
| Ease of use | 🟡 Moderate — needs CLI setup | 🟢 Very easy — no setup |
Bottom line: If you’re comfortable with a terminal and want unlimited free renders with full privacy, html-video wins. If you want a no-setup browser tool and don’t mind paying, a cloud service may suit you better.
Alternatives — 3 similar tools
1. Remotion
A React-based video framework for developers. You write your video in code (React components) and it renders to MP4. Very powerful and polished, but has a paid licence for teams above 4 developers. Great if you already know React.
2. Motion Canvas
An open-source, code-first animation library perfect for explainer videos, code walkthroughs, and math visualisations. You write animations in TypeScript. Completely free. Best for developers who want precise control over every frame.
3. Manim (by 3Blue1Brown)
The engine behind the famous YouTube channel 3Blue1Brown. Specialises in mathematical and scientific animations. Completely free and open-source, but has a steep learning curve and is best suited to Python developers who need clean data or math visualisations.
🚀 Want more free AI tools like this?
We find, test, and write setup guides for the best free and open-source AI tools — so you don’t have to dig through GitHub yourself.Browse Free AI Tools at globalaiforce.com/browse-tools/→
📸 Follow us for daily AI tool tips and tutorials: instagram.com/globalaiforce