← Back to Home

html-video — Turn HTML Into Programmatic MP4 Videos With Your AI Coding Agent

2026-06-07

html-video — Turn HTML Into Programmatic MP4 Videos With Your AI Coding Agent 🎬

What is it? html-video is an open-source (Apache 2.0) meta-layer for programmatic video generation built by the nexu-io team (creators of Open Design and HTML Anything). It sits above existing rendering engines (Hyperframes, Remotion, Motion Canvas) and lets your local AI coding agent turn HTML, CSS, and data into real MP4 videos — all on your machine, with no per-render fees or vendor lock-in.

Why it's trending: html-video hit 1,845+ GitHub stars in under two weeks because it solves a real pain point for coding agents. Before html-video, generating a video meant either learning a complex DSL (Remotion, Manim), relying on cloud rendering APIs with per-minute billing, or stitching together screenshots manually. html-video wraps all of that into a single agent-friendly interface: your coding agent writes animated HTML frames, and html-video handles the recording (headless Chromium) and encoding (ffmpeg libx264). It works with 14 coding agents — Claude Code, Codex CLI, Cursor Agent, Gemini CLI, Hermes, Windsurf CLI, Copilot CLI, and more — all auto-detected on your PATH. The Open Design ecosystem (HTML Anything, Open Design itself, now html-video) is building a complete open-source stack for agent-driven content creation, and html-video is the motion component that was missing.

📋 Prerequisites

Before we start, make sure you have:

  • Node.js 20+ and pnpm 9+ installed (npm install -g pnpm)
  • ffmpeg installed (ffmpeg -version)
  • Chromium (via Playwright: npx playwright install chromium)
  • Git for cloning the repo
  • At least one AI coding agent CLI installed (optional but recommended for the full workflow)

🔧 Setup & Installation

Clone the repo and install dependencies:

git clone https://github.com/nexu-io/html-video.git
cd html-video
pnpm install
pnpm -r build

That's it — no API keys, no cloud accounts, no Docker. Everything runs locally.

Verify Your Setup

Run the doctor command to check that all prerequisites are met:

node packages/cli/dist/bin.js doctor

This detects installed agents, engines, Chromium availability, and ffmpeg. You'll see output like:

✓ Node.js 22.22.3
✓ pnpm 9.x
✓ ffmpeg detected
✓ Chromium available (via playwright)
✗ No coding agents found on PATH

Launch the Studio

node packages/cli/dist/bin.js studio

This starts a local browser studio at http://127.0.0.1:3071 with:

  • A live template gallery (21 templates)
  • An agent selector (auto-detected CLIs)
  • A per-frame text editor for storyboarding
  • AI soundtrack panel (optional MiniMax API key)
  • Export to MP4 button

🎬 How It Works

The pipeline is simple: one prompt (or link) goes in, a real MP4 comes out.

html-video Architecture

⚙️ Architecture Overview

html-video is built around a pluggable engine architecture with six main components:

  1. Source Fetcher — takes a prompt, a URL (article link), or a GitHub repo URL, fetches the content server-side, and flattens it to Markdown. Server-rendered pages (like WeChat 公众号 articles) work out of the box.

  2. Agent Runtime — auto-detects which coding agents are on your PATH (14 supported: Open Design Vela, Windsurf CLI, Trae CLI, Claude Code, Cursor Agent, Codex CLI, Hermes, Gemini CLI, Grok Build, Qwen Code, OpenCode, GitHub Copilot CLI, Aider, Anthropic Messages API). The agent reads the source material and decides the storyboard.

  3. Content Graph — a multi-frame intermediate representation (IR) built by the agent. Nodes represent entities, data points, or text. Edges represent sequence, dependency, or contrast. The graph is topologically sorted into frame order with timing.

  4. Frame Renderer — each node in the content graph becomes a self-contained animated HTML file on disk. Templates from the 21-template gallery provide visual styles (data charts, title cards, product promos, explainers, cinematic frames).

  5. Hyperframes Engine — the shipped rendering adapter. It launches headless Chromium (via Playwright), loads each HTML frame, records the animation frame-by-frame (auto-extending to cover CSS/JS animations), and outputs webm files.

  6. FFmpeg Encoder — takes the per-frame webm files, encodes them to MP4 (libx264), concatenates into a single video, and optionally mixes in AI-generated soundtrack (MiniMax music + narration).

Single-frame videos take a fast path that skips the content graph entirely.

Supported Workflows

Workflow Input Output
Prompt → Video Describe a topic Agent writes scenes from scratch
Article → Video Paste a URL Content fetched, analyzed, storyboarded
Repo → Video GitHub repo URL README + structure turned into walkthrough

📦 21 Templates at a Glance

html-video ships with 21 curated, license-clean templates (all Apache-2.0 compatible):

  • Data Viz — NYT-style animated line charts, Swiss/Vignelli grid data cards
  • Title Cards — Glitch titles with chromatic aberration, kinetic type, typewriter cursor VFX
  • Heroes & Cinematics — Liquid gradient heroes, light-leak film grain, warm-grain editorial
  • Product Promos — 15s / 30s multi-scene product reveal storyboards
  • Explainer Scaffolds — Decision-tree explainers, multi-step tutorials

Every template is described by a template.html-video.yaml manifest that the agent reads to understand what the template does, what inputs it needs, and what resolution/fps/duration it supports — without ever opening the HTML file.

🎵 AI Soundtrack

html-video supports optional AI-generated audio:

  1. Background Music — describe a mood ("calm cinematic ambient, slow build"), MiniMax generates an instrumental track
  2. Narration — type a script; MiniMax TTS reads it

Both are mixed into the exported MP4 via ffmpeg (music ducked under voice, fade in/out). No MiniMax key configured? The rest of the studio works unchanged.

🚀 CLI Quick Reference

Besides the studio, html-video comes with useful CLI utilities:

# Check your setup
node packages/cli/dist/bin.js doctor

# Search templates by intent
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

# Launch the studio
node packages/cli/dist/bin.js studio

🧪 Verification Checklist

  • pnpm install && pnpm -r build completes without errors
  • node packages/cli/dist/bin.js doctor reports all green
  • Studio launches on http://127.0.0.1:3071
  • Template gallery loads all 21 templates
  • Agent selector detects your installed CLI(s)
  • Single-frame video renders to MP4 successfully

🔗 Resources

← Retour à l'Accueil

html-video — Transformez du HTML en vidéos MP4 avec votre agent IA

2026-06-07

html-video — Transformez du HTML en vidéos MP4 avec votre agent IA 🎬

Qu'est-ce que c'est ? html-video est une meta-couche open-source (Apache 2.0) pour la génération de vidéos programmatiques, créée par l'équipe nexu-io (créateurs d'Open Design et HTML Anything). Elle se place au-dessus des moteurs de rendu existants (Hyperframes, Remotion, Motion Canvas) et permet à votre agent IA local de transformer du HTML, CSS et des données en véritables vidéos MP4 — directement sur votre machine, sans frais par rendu ni verrouillage fournisseur.

Pourquoi ça cartonne : html-video a atteint 1 845+ étoiles GitHub en moins de deux semaines car elle résout un vrai problème pour les agents de codage. Avant html-video, générer une vidéo signifiat soit apprendre un DSL complexe (Remotion, Manim), soit utiliser des API cloud facturées à la minute, soit assembler des captures d'écran manuellement. html-video encapsule tout cela dans une interface unique compatible avec les agents : votre agent écrit des trames HTML animées, et html-video s'occupe de l'enregistrement (Chromium sans tête) et de l'encodage (ffmpeg libx264). Cela fonctionne avec 14 agents de codage — Claude Code, Codex CLI, Cursor Agent, Gemini CLI, Hermes, Windsurf CLI, Copilot CLI, et plus — tous détectés automatiquement sur votre PATH. L'écosystème Open Design (HTML Anything, Open Design, maintenant html-video) construit une stack open-source complète pour la création de contenu pilotée par agent, et html-video est le composant vidéo qui manquait.

📋 Prérequis

Avant de commencer, assurez-vous d'avoir :

  • Node.js 20+ et pnpm 9+ installés (npm install -g pnpm)
  • ffmpeg installé (ffmpeg -version)
  • Chromium (via Playwright : npx playwright install chromium)
  • Git pour cloner le dépôt
  • Au moins un agent IA CLI installé (optionnel mais recommandé pour le workflow complet)

🔧 Installation et Configuration

Clonez le dépôt et installez les dépendances :

git clone https://github.com/nexu-io/html-video.git
cd html-video
pnpm install
pnpm -r build

C'est tout — pas de clés API, pas de comptes cloud, pas de Docker. Tout fonctionne localement.

Vérifier votre installation

Lancez la commande doctor pour vérifier que tous les prérequis sont satisfaits :

node packages/cli/dist/bin.js doctor

Cela détecte les agents installés, les moteurs, la disponibilité de Chromium et ffmpeg. Vous verrez un résultat comme :

✓ Node.js 22.22.3
✓ pnpm 9.x
✓ ffmpeg détecté
✓ Chromium disponible (via playwright)
✗ Aucun agent de codage trouvé sur le PATH

Lancer le Studio

node packages/cli/dist/bin.js studio

Cela démarre un studio navigateur local sur http://127.0.0.1:3071 avec :

  • Une galerie de 21 templates
  • Un sélecteur d'agent (CLIs détectés automatiquement)
  • Un éditeur de texte par trame pour le storyboard
  • Un panneau de bande-son IA (clé API MiniMax optionnelle)
  • Un bouton d'export MP4

🎬 Comment ça fonctionne

Le pipeline est simple : une instruction (ou un lien) entre, un vrai MP4 sort.

Architecture html-video

⚙️ Architecture

html-video repose sur une architecture à moteurs enfichables avec six composants principaux :

  1. Source Fetcher — prend une instruction, une URL (lien d'article) ou une URL de dépôt GitHub, récupère le contenu côté serveur et le transforme en Markdown. Les pages servies côté serveur (comme les articles WeChat 公众号) fonctionnent sans problème.

  2. Agent Runtime — détecte automatiquement les agents de codage présents sur votre PATH (14 supportés : Open Design Vela, Windsurf CLI, Trae CLI, Claude Code, Cursor Agent, Codex CLI, Hermes, Gemini CLI, Grok Build, Qwen Code, OpenCode, GitHub Copilot CLI, Aider, Anthropic Messages API). L'agent lit le contenu source et décide du storyboard.

  3. Content Graph — une représentation intermédiaire multi-trame (IR) construite par l'agent. Les nœuds représentent des entités, points de données ou textes. Les arêtes représentent la séquence, la dépendance ou le contraste. Le graphe est trié topologiquement pour déterminer l'ordre et le timing des trames.

  4. Frame Renderer — chaque nœud du graphe de contenu devient un fichier HTML animé autonome sur le disque. Les 21 templates fournissent les styles visuels (graphiques de données, cartes titres, promos produits, explainers, trames cinématiques).

  5. Hyperframes Engine — l'adaptateur de rendu livré. Il lance Chromium sans tête (via Playwright), charge chaque trame HTML, enregistre l'image par image (en s'étendant automatiquement pour couvrir les animations CSS/JS), et produit des fichiers webm.

  6. FFmpeg Encoder — prend les fichiers webm par trame, les encode en MP4 (libx264), les concatène en une seule vidéo, et mélange optionnellement la bande-son IA (musique + narration MiniMax).

Les vidéos à trame unique empruntent un chemin rapide qui ignore le graphe de contenu.

Workflows supportés

Workflow Entrée Sortie
Instruction → Vidéo Décrivez un sujet L'agent écrit les scènes de zéro
Article → Vidéo Collez une URL Contenu récupéré, analysé, storyboardé
Repo → Vidéo URL GitHub README + structure transformés en tutoriel vidéo

📦 21 Templates en un coup d'œil

html-video inclut 21 templates organisés (tous compatibles Apache 2.0) :

  • Data Viz — Graphiques animés style NYT, cartes données Swiss/Vignelli
  • Cartes Titres — Titres glitch avec aberration chromatique, texte cinétique, curseur machine à écrire
  • Héros & Cinématiques — Dégradés liquides, fuites de lumière, grain argentique
  • Promos Produits — Storyboards multi-scènes de 15s / 30s
  • Explainers — Arbres de décision, tutoriels pas-à-pas

Chaque template est décrit par un manifeste template.html-video.yaml que l'agent lit pour comprendre ce que fait le template, les entrées nécessaires, et la résolution/fps/durée supportée — sans jamais ouvrir le fichier HTML.

🎵 Bande-son IA

html-video supporte l'audio généré par IA :

  1. Musique de fond — décrivez une ambiance ("calme cinématique ambient, progression lente"), MiniMax génère une piste instrumentale
  2. Narration — tapez un script ; MiniMax TTS le lit

Les deux sont mixés dans le MP4 exporté via ffmpeg (musique atténuée sous la voix, fondu entrée/sortie). Pas de clé MiniMax ? Le reste du studio fonctionne normalement.

🚀 Référence CLI

En plus du studio, html-video propose des utilitaires CLI :

# Vérifier votre installation
node packages/cli/dist/bin.js doctor

# Chercher des templates par intention
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

# Lancer le studio
node packages/cli/dist/bin.js studio

🧪 Liste de Vérification

  • pnpm install && pnpm -r build se termine sans erreur
  • node packages/cli/dist/bin.js doctor rapporte tout vert
  • Le studio démarre sur http://127.0.0.1:3071
  • La galerie affiche les 21 templates
  • Le sélecteur d'agent détecte vos CLI installés
  • Une vidéo à trame unique est rendue en MP4 avec succès

🔗 Ressources