html-video

写好代码模板,批量渲染成片不用等

开源 🏷️完全免费 ✅ 目前可打开 视频生成 🍴 复刻 582 🐛 待处理 55 👀 关注 22
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 4824
维护状态 低维护
是否开源 开源
定价模式 🏷️完全免费 完全免费,Apache-2.0 开源,无按渲染次数收费,可本地部署或在线使用。

项目预览

html-video 项目界面预览图
图片来源:项目官网

项目数据

分类视频生成
开发团队nexu-io
定价模式🏷️完全免费
价格说明完全免费,Apache-2.0 开源,无按渲染次数收费,可本地部署或在线使用。
访问状态✅ 目前可打开
是否开源是
开源协议Apache-2.0
主要语言HTML
技术栈/模型ai-agent,apache-2,coding-agent,css,ffmpeg,html,html-to-video,hyperframes,mp4,open-design,open-source,programmatic-video,video,video-as-code,video-generation
GitHub 星标★ 4824
上线时间2026-05-27 00:00:00
代码更新2026-06-21
仓库体积9.5 MB
本站数据更新2026-11-10
维护状态低维护
收录时间2026-08-09
浏览次数6

项目介绍

面向编程智能体的程序化视频生成工具,可在本地将 HTML、CSS 与数据直接渲染为 MP4 视频,内置 21 套模板与可插拔渲染引擎,支持 AI 配乐,Apache-2.0 协议且无按次计费,是代码生成视频的轻量之选。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化,观测越久曲线越完整

数据来源:GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 4824

使用教程

难度:入门 约 10 分钟 部署方式:命令行工具 5 步

环境要求

  • Node.js 运行环境(需能执行 node 命令)
  • pnpm 包管理器(用于 pnpm install / pnpm -r build)
  • 本地已安装并登录受支持的编码智能体之一(如 Claude Code、Cursor、Codex、Gemini、OpenCode、Copilot、Aider 等),
  • 可用的浏览器,用于访问 Studio 界面

安装与启动步骤

  1. 1克隆并安装依赖

    进入项目根目录后安装整个 monorepo 的依赖,首次执行耗时较长,请保持网络畅通。

    git clone https://github.com/nexu-io/html-video.git
    cd html-video
    pnpm install
  2. 2构建所有子包

    递归构建仓库内所有包,生成 CLI 产物 packages/cli/dist/bin.js,后续命令都依赖它。

    pnpm -r build
  3. 3检测智能体与引擎

    运行 doctor 自动探测本机已安装的编码智能体和可用的渲染引擎,确认环境是否就绪。

    node packages/cli/dist/bin.js doctor
  4. 4搜索模板

    按意图检索内置的 21 套模板,例如“github stars race”,用 --top 控制返回条数。

    node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3
  5. 5启动 Studio

    启动本地工作室界面,随后在浏览器访问 http://127.0.0.1:3071 开始制作视频。

    node packages/cli/dist/bin.js studio

如何确认成功

执行 studio 命令后,浏览器打开 http://127.0.0.1:3071 能正常看到工作室界面即启动成功。

常见问题

Q:支持哪些编码智能体?

A:共 14 个后端,包括 Open Design、Windsurf CLI、Trae CLI、Claude Code、Cursor、Codex、Gemini、Grok、Qwen、OpenCode、Copilot、Aider、Hermes,或直接使用 Anthropic API。

Q:Studio 页面打不开怎么办?

A:先确认已执行 pnpm -r build 生成 CLI 产物,再确认 127.0.0.1:3071 端口未被其他程序占用,然后重新运行 studio 命令。

Q:怎么知道本机环境是否满足要求?

A:运行 node packages/cli/dist/bin.js doctor,它会列出检测到的智能体和渲染引擎;列表为空说明还需安装对应工具。

Q:使用需要付费吗?

A:项目采用 Apache-2.0 协议,没有按次渲染费用,也没有厂商锁定,渲染在本机完成。

Q:除了手动描述,还能怎么生成视频?

A:可以直接粘贴文章链接或 GitHub 仓库地址,让智能体自动生成多帧动画视频,再导出为 MP4。

注意事项

  • Studio 默认监听 http://127.0.0.1:3071,仅在本地可访问。
  • 视频导出为真实 MP4,技术栈包含 ffmpeg,建议本机具备相应渲染能力。
  • 支持可选的 AI 配乐与旁白,以及逐帧文案编辑。
  • 一条智能体循环完成从描述到 MP4 的生成,全程在本机渲染,无按次计费。

核心亮点

  • 将HTML/CSS直接渲染为MP4,支持可插拔渲染引擎,无需按次付费,适合编程代理批量生成视频
  • 内置21种模板和AI配乐功能,降低视频制作门槛,适合快速产出营销或演示内容
  • Apache-2.0许可,官方Open Design团队维护,代码开放且社区活跃,星标增长快

不足之处

  • 文档/社区待观察
  • 依赖本地FFmpeg等环境,部署和渲染性能可能受限于个人电脑配置

适用场景

  • 编程代理自动生成产品演示或教程视频
  • 数据可视化报告转化为动态视频
  • 营销人员快速制作社交媒体短视频

替代项目

Remotion、Motion Canvas、Puppeteer + ffmpeg

上一篇:lingbot-world

下一篇:video-shotcraft

同类项目推荐

rcm 开源

把视频扩散模型蒸馏成少步生成,快出视频不降质

rCM & Causal-rCM: Leading and Unified Algorithms/Infrastructures for Bidirectional/A···

★ 829 2026-08-09
physctrl 开源

让 AI 生成的视频既逼真又符合物理规律,还能手动控制。

[NeurIPS 2025] PhysCtrl: Generative Physics for Controllable and Physics-Grounded Vi···

★ 137 2026-09-29
iVideoGPT 开源

用视频生成预测未来,让机器人学会操作

Official repository for "iVideoGPT: Interactive VideoGPTs are Scalable World Models"···

★ 189 2026-08-09
RefAlign 开源

让视频生成严格跟随参考图,身份不跑偏

[ECCV 2026] Official PyTorch implementation of RefAlign: Representation Alignment fo···

★ 340 2026-08-09
HyDRA 开源

让视频模型记住过去,生成更连贯的未来

Out of Sight but Not Out of Mind: Hybrid Memory for Dynamic Video World Models

★ 287 2026-08-09
HumanVid 开源

用UE5合成数据,低成本生成高质量可控人体视频

[NeurIPS D&B Track 2024] Official implementation of HumanVid

★ 351 2026-08-09
OmniWeaving 开源

自由组合条件,让视频生成按你的意图推理出片

Official Implementation of OmniWeaving: Towards Unified Video Generation with Free-f···

★ 807 2026-11-09
ID-V2V 开源

视频换风格,人脸不换样

The official implementation of SIGGRAPH Asia 2026 paper "ID-V2V: Identity-preserving···

★ 293 2026-08-09
baize-toolbox 开源

拖拽文件,一键搞定音视频格式转换与剪辑

白泽工具箱,基于electron+ffmpeg实现的一款功能强大的多媒体工具

★ 109 2026-08-09