html-video
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.
html-video is an agent skill that transforms HTML, CSS, and structured data into rendered MP4 videos through local coding agents. Developers describe a video concept or paste article/repository links, and their agent generates multi-frame animated videos using one of 21 curated templates, then renders them locally via headless Chromium and ffmpeg. The skill supports 14 coding agents including Claude Code, Cursor, Windsurf CLI, and the Anthropic API, with optional AI-generated soundtracks through MiniMax. Built by the Open Design team, it runs entirely on your machine with no per-render fees or cloud dependencies.
Key Features
Use Cases
- 01Converting blog articles or documentation into animated explainer videos for social media
- 02Generating data visualization videos from CSV/JSON datasets with NYT-style animated charts
- 03Creating product demo videos by describing features or linking to GitHub repositories
- 04Building multi-scene promotional videos with kinetic typography and branded templates
- 05Automating video generation in CI/CD pipelines through the scriptable CLI
- 06Producing technical content videos with code-style typewriter effects and terminal aesthetics
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
html-video — FAQ
What is html-video and what does it do?+
html-video is an agent skill that lets coding agents generate real MP4 videos from HTML, CSS, and data. You describe a video or paste a link, your agent picks a template and fills it with content, then renders it to MP4 locally using headless Chromium and ffmpeg.
How do I install and run html-video?+
Install Node.js 20+, pnpm 9+, ffmpeg, and Chromium (via npx playwright install chromium). Clone the repo, run pnpm install && pnpm -r build, then start the studio with node packages/cli/dist/bin.js studio. The browser interface opens at localhost:3071.
Which coding agents and clients work with html-video?+
html-video supports 14 agents including 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, and the Anthropic Messages API. The studio auto-detects installed agents on your PATH.
Do I need API keys or cloud services to use html-video?+
No API keys are required for core video rendering, which runs entirely locally. Optional features like AI soundtrack generation require a MiniMax API key, and using the Anthropic API directly (when no CLI agent is installed) requires an Anthropic key.
Is html-video free to use?+
Yes, html-video is Apache-2.0 licensed with no per-render fees, no seat limits, and no vendor lock-in. All 21 templates are license-clean and safe for commercial use.
Can html-video convert articles and GitHub repos into videos?+
Yes, paste a web article URL or GitHub repository link and the studio fetches the content server-side (including server-rendered pages like WeChat articles), then the agent builds a multi-frame video from the actual material. This works alongside prompt-based generation.
How do I install html-video?+
Open the source repository on GitHub and follow its README. html-video is a skill — MCP Agents Market links you directly to the official repo.
Is html-video free?+
html-video is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.