html-video – Open Design Team's Open-Source HTML CapCut

1. What Is html-video

html-video is an open-source HTML CapCut from Open Design (nexu.io), built on the hyperframes framework. Agents write HTML to produce product promos, explainers, and similar videos at world-class quality. It ships 20+ top templates, paginated editing, multi-aspect export, and Minimax AI voice/music—fully local without requiring an API key for core use. The idea replaces traditional video projects with HTML/CSS, lowering the bar from pro NLE skills to front-end skills while keeping commercial-grade output.

Image source: Official article

Technical positioning and domain: AI video generation × front-end innovation as an "agent-native video engine." Unlike classic NLEs or generative video models, it renders via HTML/CSS for pixel-level control and agent-driven workflows—a rare "code-driven video" path.

Development background: Open Design (nexu.io) merges design tools and AI workflows. Motivation: high learning cost, slow renders, poor agent integration in traditional video. HTML-as-video targets "any agent that writes HTML can make video."

Core value: html-video addresses high production cost (software, hardware, labor), the agent–video gap (agents cannot drive pro NLEs), and privacy/cloud tradeoffs (local-first, no API key for core). ~30K lines deliver CapCut-like experience at an order-of-magnitude lower cost.

Technical characteristics: hyperframes renders frames with HTML/CSS; 20+ templates; 16:9, 9:16, 1:1, 4:5 via responsive CSS; native hooks for six Code Agent CLIs (Codex, Claude Code, Hermes, Cursor Agent, etc.) for end-to-end automation.

2. Key Features

• Template-based video generation: 20+ HTML video templates for promos, explainers, data viz, etc. Pick a template and an agent fills content into dynamic MP4 without hand-designing every frame.

• Paginated edit and preview: Studio supports page preview, page edit, and frame-level text changes with live feedback—avoiding slow render-check loops and speeding iteration.

• Multi-aspect export: One-click 16:9, 9:16, 1:1, 4:5 via CSS media queries and viewport units—no separate projects per platform.

• Agent integration: Auto-detects six local Code Agent CLIs with one-click switch in the top bar—zero config for agent-driven pipelines from content ingest to MP4 export.

• AI voice and music: Minimax dubbing generates narration and BGM from script text with low token cost—no manual recording or music licensing for basic use.

• Local-first: Runs fully local without cloud API keys for core features—clone, install deps, go. Strong privacy and low long-term cost.

• Live iterative preview: Page mode updates text and layout instantly without full re-render—ideal for promo copy and explainer tweaks.

• Open and customizable: Apache 2.0—commercial and academic use; extend templates, integrate other AI services, unlike closed NLEs.

3. How to Use

1. Environment: Node.js 18+, npm 8+. macOS, Linux, Windows (Git Bash/WSL). No GPU required.

2. Clone: git clone https://github.com/nexu-io/html-video.git (SSH recommended to avoid GitHub rate limits).

3. Install: npm install—no API keys or accounts; public npm packages only. Taobao mirror optional if network is slow.

4. Start Studio: npm run dev → default http://localhost:3000. First launch loads 20+ built-in templates.

5. Input content: Feed URLs, files, or articles to an agent—or edit HTML manually in Studio with auto-detected local Code Agent CLI.

6. Paginated polish: Preview/edit each page, frame-level text, layout, animation params—instant preview without re-render.

7. Export MP4: Click Export for HD MP4. With Minimax enabled, audio is generated and muxed before export.

Notes: Minimax dubbing needs optional API key—not required for core. Preview all pages before export. For 5+ minute videos, consider page-wise export then merge to avoid long single renders.

4. Pros and Cons

5. Comparison with Similar Tools

Selection advice: Developers and agent workflows should pick html-video—code-driven, zero core API cost, local privacy, strong for batch promo/explainers. FireRed-OpenStoryline suits non-technical creators via chat editing. CapCut Pro for fine timeline/VFX control. Runway Gen-3 for generating new footage, not editing existing material.

6. Editor's Take

html-video is highly innovative—unlike Runway/Pika diffusion models, it uses mature HTML/CSS with templates and agents for deterministic, high-quality, low-cost output, avoiding generative inconsistency (faces, motion logic). It closes a key agent gap: agents code, write, draw—but couldn't make video; HTML bridges that. Batch teams (creators, marketing) gain major efficiency.

hyperframes enables pixel control with efficient renders; templates are commercial-grade; multi-aspect via CSS is clean engineering.

Best for front-end-capable devs/teams; less technical creators may need agents to write HTML. Future: more TTS, dynamic charts, community template market—potential agent infrastructure.

—strong innovation and utility, open Apache 2.0; −0.5 for template limits and front-end knowledge. A standout tool for technical teams.

7. Use Cases

• Creator content at scale: Turn articles/docs into dubbed explainers for 4:5, 16:9, etc.—10+ videos/day possible for tech bloggers.

• Product promo: Website URL → dynamic product video in ~10 minutes at ~1/10 traditional cost for startups without video teams.

• Data viz reports: CSV/JSON → animated chart videos for presentations and social—stronger than static charts for analysts.

• E-commerce shorts: Batch product intros/tutorials with Minimax dubbing for content matrix ops.

• Education slides-to-video: Syllabus/notes → paginated course videos with teacher polish in Studio.

8. FAQ

Q: GPU required?
A: No—CPU/memory based. 8 GB+ RAM; macOS/Linux/Windows (Git Bash/WSL).

Q: Chinese content and dubbing?
A: Yes for text in templates and Studio. Minimax supports Chinese narration; swap TTS via config if needed.

Q: Custom templates?
A: Basic HTML/CSS, flex, animations. See hyperframes docs; add files under templates following built-in examples.

Q: Export quality? 4K?
A: Default 1080p commercial-grade; configurable resolution. No 4K yet due to engine limits—1080p enough for most social/promo.

Q: vs CapCut Pro?
A: html-video wins on local-first, zero core API cost, agent-native automation; CapCut needs client + cloud AI and lacks agent CLI integration.

Q: Minimax cost?
A: API key with free tier; ~¥0.1 for ~3 min dubbing—configure key in project settings.

Q: Commercial use?
A: Apache 2.0 allows commercial use; you own output. Confirm rights for template assets; prefer original/licensed media.

9. Project Links

• GitHub: https://github.com/nexu-io/html-video
• Open Design: https://nexu.io/
• hyperframes docs: In-repo; also at http://localhost:3000/docs when running dev server