html-video is an Apache-2.0 meta-layer from the Open Design team that turns HTML, CSS and data into real MP4 files on a local laptop, built for coding agents and the developers who drive them.

What it is

html-video is a programmatic video tool that sits as a meta-layer above the HTML-to-video engines. A local coding agent — one of fourteen, among them Claude Code, Cursor Agent, Codex CLI, Gemini CLI and the Anthropic API — takes a described video or a pasted article link or GitHub repo and turns it into a multi-frame, fully animated video, then renders it to a real MP4 on the machine. One agent loop, pluggable rendering engines, a curated gallery of 21 templates and an optional AI soundtrack.

The problem it solves is fragmentation. HTML-to-video is a real category, but every engine imposes its own authoring model: Hyperframes uses HTML, CSS and GSAP with agent skills; Remotion uses React components; Motion Canvas and Revideo use TypeScript generators on canvas; Manim is math and 3D first. Learning each model and stitching them into one workflow costs real engineering time, so most teams pick one and live with its limits. html-video replaces that choice with one render(input, ctx) adapter contract, so adding an engine gives every template, every agent and the whole studio workflow access to it, with no new DSL to learn and no rewrite when you switch engines.

Key capabilities

• Pluggable render engines behind one render(input, ctx) adapter contract, keeping the engine an implementation detail.
• Shipped Hyperframes engine renders real MP4: headless Chromium records the animated HTML frame by frame and ffmpeg encodes it with libx264.
• Gallery of 21 single-file animated HTML templates, including frame-data-chart-nyt, frame-glitch-title, frame-liquid-bg-hero, frame-light-leak-cinema, vfx-text-cursor and frame-logo-outro.
• Drives 14 coding agents, among them Open Design (Vela), Claude Code, Cursor Agent, Codex CLI, Gemini CLI, Qwen Code, GitHub Copilot CLI, Aider and the Anthropic API.
• Accepts a description, a pasted article link or a GitHub repo as the brief, producing a multi-frame animated video with an optional AI soundtrack.
• Apache-2.0 with no per-render fees and no vendor lock-in; the primary language is HTML.

Who uses it and how

• Developers running a local coding agent who want a talk-to-your-agent path to a finished MP4 instead of a new authoring DSL.
• Editorial and data teams telling "the number went up" stories with the frame-data-chart-nyt headline, annotated data points and source line.
• Product and marketing teams building reveals and sign-offs from frame-liquid-bg-hero, frame-logo-outro and the multi-scene promo templates.
• Teams treating video as code that want the render on their own machine — the project carries 4587 stars, 564 forks and 53 open issues.

Getting started

The documented route is the hosted studio at https://open-design.ai/html-video, where all 21 templates browse live. Bring a local coding agent, describe the video or paste a link, and it renders the MP4 on your machine.

How it compares

The README names its neighbours directly: Remotion is source-available and paid above four developers, Motion Canvas and Revideo suit code-first explainers, and Manim targets math and 3D, each forcing its own authoring model. html-video contrasts on licence and cost model — Apache-2.0, no per-render fees and no vendor lock-in — and lets the engine be chosen per use case behind one interface.

When to use it — and when not to

A self-hoster must run headless Chromium and ffmpeg locally; the render stays on the machine with no per-render cost. Only the Hyperframes engine is runnable today, since the Remotion, Motion Canvas, Revideo and Manim adapters are designed but not built, so anyone who needs those engines now should wait or use them directly. With 53 open issues, the project suits teams comfortable on a fast-moving codebase.

  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