by nexu-io
Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.
# Add to your Claude Code skills
git clone https://github.com/nexu-io/html-videoLast scanned: 6/6/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-06-06T06:52:18.861Z",
"npmAuditRan": false,
"pipAuditRan": true
}html-video is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by nexu-io. Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team. It has 3,948 GitHub stars.
Yes. html-video passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/nexu-io/html-video" and add it to your Claude Code skills directory (see the Installation section above).
html-video is primarily written in HTML. It is open-source under nexu-io on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh html-video against similar tools.
No comments yet. Be the first to share your thoughts!
HTML becomes video — on your laptop. Bring your local coding agent (Open Design · Windsurf CLI · Trae CLI · Claude Code · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · or the Anthropic API). Describe a video, or paste an article link / GitHub repo, and the agent turns it into a multi-frame, fully animated video — then renders it to a real MP4 right on your machine. One agent loop, pluggable rendering engines, a curated template gallery, optional AI soundtrack. Apache-2.0, no per-render fees, no vendor lock-in.
Every template below is a real, animated single-file HTML video — these are live renders, not mockups. Drop one in, let the agent fill it with your content, export to MP4.
…and 15 more, including multi-scene product promos, kinetic type, Swiss-grid and Vignelli data cards, decision-tree explainers, Takram-organic motion, and warm-grain editorial. Browse all 21 live in the studio gallery.
HTML→Video is a real category — but every engine is opinionated, and each wants you to learn its authoring model:
| Engine | Paradigm | Tradeoff | In html-video |
|---|---|---|---|
| Hyperframes | HTML + CSS + GSAP, agent-skill driven | Single rendering paradigm | ✅ Shipped — the default engine; renders real MP4 via headless Chromium + ffmpeg |
| Remotion | React components | Source-available, paid above 4 devs | 🗺️ Planned |
| Motion Canvas · Revideo | TypeScript generators on canvas | Best for explainers, code-first | 🗺️ Planned |
| Manim & friends | Math / 3D first | Niche | 🗺️ Researching |
Picking the right engine per use case, learning each model, and stitching them into one workflow costs real engineering time. Most teams pick one and live with its limits.
html-video is the meta-layer that sits above all of them. You talk to your agent; it picks the engine, picks the template, fills in your content, and renders the video. The engine is an implementation detail behind a single adapter interface — one render(input, ctx) contract that any backend can satisfy. Add a new engine and every template, every agent, and the whole studio workflow get it for free. No new DSL to learn, no rewrite when you switch engines.
The same idea powers Open Design in the design space — an agent meta-layer over many tools. html-video is the motion counterpart from the same team.
Status: the pluggable-engine architecture is in place, and the Hyperframes engine is fully wired up and renders real MP4 — headless Chromium records the animated HTML frame-by-frame and ffmpeg encodes it (libx264). Remotion, Motion Canvas / Revideo, and Manim are on the roadmap: the adapter interface is designed for them, but their adapters aren't built yet. The "In html-video" column above is the single source of truth for what's actually runnable today.
| Coding agents (14) | Open Design (Vela) · Windsurf CLI · Trae CLI · Claude Code · Cursor Agent · Codex CLI · Gemini CLI · Grok Build · Qwen Code · OpenCode · GitHub Copilot CLI · Aider · Hermes · Anthropic Messages API — auto-detected on your PATH, switchable from the top bar. |
| Real MP4 render | Headless Chromium records the animated HTML and ffmpeg encodes it (libx264) — locally, no cloud render, no per-clip fee. |
| Article / repo → video | Paste a URL or GitHub repo; the studio fetches it server-side (handles WeChat 公众号 articles) and builds the video from the real content. |
| 21 templates | Curated, license-clean patterns: data viz, product promos, social shorts, explainers, kinetic type, transitions — previewed live in the gallery. |
| Multi-frame storyboards | A content-graph drives multi-scene videos; edit per-frame text inline, reorder, re-render. |
| AI soundtrack | Optional background music + narration via MiniMax, mixed into the MP4 at export. |
| Studio + CLI | A local browser studio and a scriptable html-video CLI. |
| License | Apache-2.0 — no per-render fees, no seat caps, no contributor agreements. |
One sentence (or one link) goes in; a real MP4 comes out. The pipeline is the same whether you start from a prompt, an article, or a repo:
prompt / link / repo
│
▼
① source fetch studio pulls the URL or repo server-side, flattens it to Markdown
│
▼
② agent loop your agent reads the material + the picked template's style and emits
│ a content-graph (the storyboard) + one HTML block per frame
▼
③ content-graph multi-frame IR — nodes (entity / data / text) + edges (sequence /
│ dependency / contrast); topo-sorted into frame order & timing
▼
④ per-frame HTML each node becomes a self-contained animated HTML frame on disk
│
▼
⑤ Hyperframes render headless Chromium loads each frame, records it (auto-extending to
│ cover the frame's own animation), → webm per frame
▼
⑥ ffmpeg each webm → mp4 (libx264), then concat into one video;
│ optional MiniMax music + narration mixed in
▼
your.mp4
Steps ②–④ are where the "meta-layer" lives: the agent decides the storyboard and the engine decides how to draw it, and neither leaks into the other. Step ⑤ is engine-specific — swapping in Remotion or Motion Canvas later replaces only that box, leaving the storyboard and the agent loop untouched. Everything runs on your machine; the only network calls are the optional source fetch and the optional soundtrack.
Single-frame videos take a fast path that skips the content-graph — one template, one HTML, straight to render.
This is what most people reach for: hand your agent a link, get a video back. The agents run as local CLIs with no network access of their own, so the studio fetches the source server-side and feeds the real content into the generation prompt — no copy-pasting article bodies, and pages behind a login-free server render (like WeChat 公众号) just work.
You: 做一个解读视频 https://mp.weixin.qq.com/s/…
Agent: 好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。
→ mul