ai-agent

html-video: Turn HTML/CSS into Ready‑to‑Play MP4s – No Render Fees

Name: html-video: Turn HTML/CSS into Ready‑to‑Play MP4s – No Render Fees
Author: nexu-io

Create programmatic videos directly on your laptop from HTML, CSS, and data using 21 templates and AI‑generated soundtracks. Ideal for founders building coding agents who need fast, cost‑free video output. 4.6k+ GitHub stars.

From the repo · “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.”

intermediate⏱ 30 minutes💵 Free

4,751 stars+45★ this week574 forksHTMLGuide quality 9/10 · reviewed Oct 7Updated 6/21/2026100% free · open source

What it is

Use this skill to automatically turn HTML into real MP4 videos on your laptop.

Real use case example

"A solo developer is creating a tutorial series about HTML development. She uses this skill to quickly create an animated intro video for each episode, using her company website's HTML code. In three steps: she sets up the render engine, configures the template, and exports the video."

Best insideClaude DesktopClaude Code

When to use it

•Creating explainer videos for products or services with dynamic data
•Generating video reports from data analytics
•Producing social media videos with programmatically generated visuals

Ready-to-paste prompt

npx @html-video/core example.html --template=instagram --soundtrack --duration=60

Heads up: Ensure you have the necessary dependencies installed, including Node.js and the @html-video/core package, and be aware that some features may require additional setup, such as configuring the render engine or soundtrack options.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/html-video && curl -fsSL https://workflowstacks.com/api/skills/html-video/claude-skill -o ~/.claude/skills/html-video/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How html-video: Turn HTML/CSS into Ready‑to‑Play MP4s – No Render Fees works

Codeflow

Free to inspect

Html-video: Turn HTML/CSS into Ready‑to‑Play MP4s – No Render Fees is a large HTML project (~16k lines across 60 code files, plus 5 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 3 months ago, Apache-2.0 license, has a test suite.

Size

Large codebase

~16k lines · 60 code files · ~2 h to skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

HTML 87%TypeScript 9%JavaScript 4%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
CLAUDE.md
The instructions the AI actually follows
3
package.json
Dependencies and the commands it exposes

What's in each folder

packages/Sub-packages / plugins98 files

templates/Templates146 files

docs/Documentation7 files

research/Research & notebooks13 files

notes/Folder2 files

assets/Images & static assets1 files

READMEHas testsDocumentedNo CIApache-2.0 licenseUpdated 3 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/html-video && curl -fsSL https://workflowstacks.com/api/skills/html-video/claude-skill -o ~/.claude/skills/html-video/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

nexu-io

Language

HTML