html-video: biến HTML thành MP4 ngay trên laptop với coding agent

TL;DR

nexu-io/html-video là một meta-layer Apache-2.0 cho phép coding agent ở local biến HTML, CSS và dữ liệu thành MP4 thật. Không cloud render, không phí per-render, không vendor lock-in. Studio chạy tại http://127.0.0.1:3071, auto-detect 14 backend agent trên PATH, và render MP4 qua headless Chromium + ffmpeg.

21 template, 6 agent detect sẵn, 0 API key bắt buộc - studio local mặc định chạy được.

Vấn đề: mỗi engine một kiểu authoring

HTML-to-video là một category có thực, nhưng mỗi engine bắt dev học một authoring model riêng. Hyperframes đi HTML + CSS + GSAP, Remotion là React component, Motion Canvas và Revideo dùng TypeScript generator trên canvas, Manim thiên về math và 3D. Pick đúng engine theo use case, học từng model, ghép vào một workflow - tất cả đều ngốn thời gian kỹ thuật. Đa phần team pick một engine rồi sống chung với giới hạn của nó.

Cách html-video trả lời vấn đề: không ép team chọn engine, không tạo DSL mới. Một interface adapter render(input, ctx) đặt phía trên, agent quyết định storyboard, engine quyết định vẽ frame, hai lớp không rò rỉ vào nhau. Sau này thêm engine mới - mọi template, mọi agent và cả studio workflow tự động được hưởng lợi.

Pipeline 6 bước

Một câu prompt, một link bài viết, hoặc một repo GitHub - đầu ra là MP4. Pipeline giống nhau dù nguồn là gì:

1. Source fetch - studio pull URL hoặc repo server-side, flatten về Markdown. Trang server-render kiểu WeChat 公众号 cũng chạy ngay.

2. Agent loop - agent đọc material + style của template được pick, emit content-graph và một HTML block cho mỗi frame.

3. Content-graph - multi-frame IR với node (entity / data / text) và edge (sequence / dependency / contrast), topo-sort thành frame order và timing.

4. Per-frame HTML - mỗi node thành một file HTML self-contained có animation.

5. Hyperframes render - headless Chromium load từng frame, record auto-extend theo animation của frame, xuất webm.

6. ffmpeg - webm sang mp4 (libx264), concat thành một video. Tùy chọn mix nhạc và narration từ MiniMax lúc export.

Single-frame video đi fast path bỏ qua content-graph - một template, một HTML, render thẳng.

Template frame-data-chart-nyt dùng cho story "the number went up" với headline và data point chú thích sẵn.

Quick start

Yêu cầu: Node.js 20+, pnpm 9+, ffmpeg, và Chromium. Nếu chưa có Chromium hệ thống, cài qua Playwright:

npx playwright install chromium

Sau đó install và chạy studio:

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio    # mở studio ở http://127.0.0.1:3071

Trong studio: pick một template hoặc chỉ cần mô tả video, paste link, chat với agent, edit text từng frame, thêm soundtrack rồi export MP4. Hai lệnh CLI tiện dùng:

node packages/cli/dist/bin.js doctor                          # detect agent + engine
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

Template frame-glitch-title cho opener, drop, và năng lượng "system online".

14 backend coding agent

Studio auto-detect coding agent trên PATH rồi chuyển qua lại từ top bar. Mặc định là Open Design (Vela) - one login, nhiều model, sau đó fallback sang agent khả dụng đầu tiên để project mới luôn có backend chạy được:

• Open Design (Vela) - ACP qua stdio, một login chọn nhiều model

• Windsurf CLI, Trae CLI, Hermes - cùng ACP qua stdio

• Claude Code, Cursor Agent, Codex CLI, Gemini CLI, Qwen Code, OpenCode, GitHub Copilot CLI - prompt qua stdin hoặc --print / exec

• Grok Build - grok -p <prompt>

• Aider - aider --message <prompt>

• Anthropic Messages API - BYOK, không cần cài CLI nào

Không cài gì hết vẫn ok: cắm một Anthropic key vào Settings, studio nói trực tiếp với Messages API.

Template frame-liquid-bg-hero cho product reveal và bold statement.

21 template license-clean

Mỗi template là một đơn vị self-contained mà agent đọc được. File manifest template.html-video.yaml mang theo tất cả thông tin agent cần để pick và drive template mà không phải mở file HTML:

• What it is for - category, tags, và danh sách best_for mà search-templates match với intent của user.

• What it outputs - resolution, aspect ratio, fps, duration, có alpha channel hay audio không.

• What goes in - inputs JSON schema, agent biết chính xác slot text/data nào cần điền.

• License provenance - SPDX id, flag attribution_required / redistribution_allowed / commercial_use, và block assets_attribution trỏ tới nguồn gốc.

Điểm này rất có ý. Mọi template license-clean ngay từ kiến trúc: fork mang theo license gốc, file NOTICE.md ở repo-root track từng nguồn và SPDX, và không có gì thiếu license được ship. Có thể đặt bất kỳ template nào vào deliverable thương mại mà không cần audit. Phạm vi: data-viz (NYT-style chart, Swiss/Vignelli grid), title và VFX (glitch, kinetic type, typewriter cursor), hero và cinematic (liquid gradient, light-leak, warm grain), product promo 15s/30s, và explainer scaffold (decision tree). Format manifest mở - community template drop vào theo cùng interface.

Template frame-light-leak-cinema cho mood, brand film, và lối kể chuyện kiểu "a quiet year".

Biến link hoặc repo thành video

Đây là use case đa phần user với tới: đưa agent một link, nhận về video. Coding agent chạy như CLI local và không tự có network - studio đảm nhiệm fetch nguồn server-side rồi feed nội dung thật vào prompt.

• Web article - fetch rồi flatten về Markdown. Trang server-render kiểu WeChat 公众号 chạy ngay.

• GitHub repo - description, structure cấp cao, và README pull qua public API. Hợp lý cho video kiểu "giải thích open-source này".

• Chỉ một prompt - mô tả chủ đề, agent tự viết content.

Dù nguồn là gì, nó thành material xây video - không phải điều kiện trang trí quanh template canned. Một bài 1,500 từ thành explainer multi-scene có pacing, mỗi dòng trace ngược về một điểm trong nguồn gốc. Một repo thành walkthrough cấu trúc thực sự của project.

Template vfx-text-cursor cho code reveal và CLI demo.

Soundtrack từ MiniMax

Trong Settings → Audio, thêm MiniMax API key. Sau đó trong per-project Soundtrack panel:

• Background music - mô tả mood (ví dụ calm cinematic ambient, slow build), MiniMax sinh track instrumental.

• Narration - gõ script, MiniMax đọc bằng TTS.

Cả hai được mix vào MP4 lúc export, nhạc được duck dưới voice, có fade-in/out tùy chọn, qua ffmpeg. Không cấu hình key thì phần còn lại của studio vẫn chạy bình thường.

So sánh với các engine khác

Từ chính README, đây là cách các engine HTML-to-video được tính:

Status thật từ README: pluggable-engine architecture xong, và Hyperframes engine fully wired up render MP4 thật. Cột "In html-video" là single source of truth cho cái gì chạy được ngay - adapter cho Remotion, Motion Canvas/Revideo và Manim vẫn đang trong roadmap.

Hạn chế

• Hiện tại chỉ adapter Hyperframes chạy được. Các adapter khác vẫn pending.

• Render qua headless Chromium - heavy I/O, performance tùy thuộc máy local.

• Coding agent chạy local không tự có network - phải đưa qua studio để fetch source server-side.

Template frame-logo-outro cho end card sạch sẽ với brand stamp.

Ai nên dùng ngay

• Coding agent dev/team cần pipeline video lập trình được, version qua git, không khóa vào cloud render.

• Indie creator muốn explainer hoặc promo MP4 từ một link bài viết, một prompt, hoặc một repo.

• OSS maintainer cần clip ngắn giải thích repo - từ README và structure thật, không stock footage.

• Đội nội dung cần chuyển long article thành multi-scene MP4 mà không copy-paste tay.

Repo Apache-2.0, không per-render fee, không seat cap, không contributor agreement. Roadmap còn thêm adapter cho Remotion / Motion Canvas / Revideo, và template marketplace.

Kết

Điểm đắt giá của html-video là tách hai câu hỏi từng gắn chặt: "video này có gì" (storyboard, do agent quyết) và "frame trông như thế nào" (style, do engine xử lý). Một interface adapter giữa hai lớp, và template thành artifact license-clean có schema có thể search bằng intent. Đối với người xây video bằng coding agent ở local, đây là điểm khởi đầu gọn ghẽ nhất hiện tại.