HTML Anything - nexu-io 团队开源的 HTML 编辑器

HTML Anything是什么

先简单交代一下背景。HTML Anything 这套开源工具，出自 nexu-io 团队之手。它的定位非常有意思——一个“Agent 时代”的 HTML 编辑器。怎么理解呢？它内置了整整75套 Skill 模板，覆盖杂志、演示、海报、小红书卡片等9种交付形态。更重要的是，它能够自动识别你本地装着的18种 Code Agent CLI，并且直接复用你已有的登录会话。这意味着，你甚至不需要配置什么 API Key 就能上手，把任意内容转换成能一键发布到微信、X、知乎这些平台的专业级 HTML。

HTML Anything的主要功能

来看几个核心能力，基本可以总结为以下几点：

• 75 套 Skill 模板，覆盖 9 种交付形态
  ：从杂志文章、Keynote 演示、简历、海报，到小红书卡片、推文卡片、Web 原型、数据报告、甚至 Hyperframes 视频，你都能找到对应的模板。说白了，就是省去了从零开始排版的功夫。

• 自动识别 18 种本地 Code Agent
  ：它会自动扫描你本地 PATH，看看你都装了哪些 Code Agent CLI——Claude Code、Cursor、Codex、Gemini 等等。只要它扫到了，就能直接复用这些工具的已登录会话，你连 API Key 都不用操心。

• 支持 11 种主流文件格式上传
  ：Markdown、TXT、CSV、Excel、JSON、SQL、YAML、HTML、PNG、JPG……只要你想得到的常见格式，大多数都能直接拖进去作为内容源。

• SSE 流式实时渲染
  ：通过 Server-Sent Events 协议，把本地 Agent 生成好的 HTML 代码一点点推送到浏览器，实现边生成边看效果。实时预览基本上是即时的。

• iframe 沙箱安全预览
  ：生成的 HTML 会在一个独立的 iframe 沙箱里运行，和主进程彻底隔离，不用担心预览时出什么安全问题。

• 一键多平台导出发布
  ：这可能是最有价值的功能之一。你可以直接导出适配微信公众号的 CSS 内联粘贴格式，也可以导出 X/微博/小红书专用的 2 倍 DPI PNG，甚至知乎 LaTeX 处理后的格式，当然也支持单文件 HTML 下载。省去了跨平台反复调整排版的麻烦。

HTML Anything的技术原理

技术上其实并不复杂，但设计思路很巧妙：

• 本地优先与 Agent 复用架构
  ：通过扫描系统 PATH，自动检测已安装的 Code Agent CLI 工具。它复用的是你已有的登录会话和订阅权限，实现零边际成本的调用。换句话说，没有额外的云端服务费，也没有 API Key 的烦恼。

• SSE 流式传输协议
  ：前端用 Server-Sent Events 建立一个持久的单向连接。Agent 生成的 HTML 代码会被流式地推过来，只要生成一点，浏览器就渲染一点。这种即时反馈，用过的都说体验感很好。

• 设计约束系统
  ：每套 Skill 模板内部都绑定了严格的排版规范，比如 CJK 优先字体栈、8px 基线网格、对比度不低于 4.5 等等。这些约束保证了输出作品的视觉品质，至少是专业出版级别的。

• 沙箱隔离安全机制
  ：生成的 HTML 在 iframe 沙箱里跑，和主应用进程隔离。就算生成的代码里有什么恶意脚本，也没法越狱到本地系统。

如何使用HTML Anything

上手步骤很清晰，跟着来就行：

• 环境准备
  ：确保你已经装了 Node.js 和 pnpm。再提前装好至少一个 Code Agent CLI（比如 Claude Code），并完成登录认证。

• 克隆项目
  ：打开终端，执行 git clone https://github.com/nexu-io/html-anything，把项目源码下载到本地。

• 安装依赖
  ：进入项目目录 cd html-anything，然后运行 pnpm install 安装所有依赖包。

• 启动服务
  ：运行 pnpm dev 启动本地开发服务器。接着打开浏览器，访问 http://localhost:3000 就能进入编辑器界面。

• 选择 Agent
  ：在界面顶部的下拉菜单里，选一个系统已经自动检测到的本地 Code Agent，比如 Claude Code。

• 创建任务
  ：点击“New task”，上传文件或者直接输入内容，然后选一套你想要的 Skill 模板类型。

• 生成预览
  ：Agent 开始处理你的输入内容，并流式生成 HTML。你可以在右侧的沙箱预览区，实时看到排版效果。

• 导出发布
  ：点一下“Export/Copy”，选好目标平台——微信、X、小红书、知乎……或者直接下载 HTML/PNG 文件。发布完成。

HTML Anything的核心优势

总结下来，这套工具的核心优势很突出：

• 零边际成本运行
  ：既然直接复用本地已登录的 Agent CLI 会话，就省去了额外购买 API Key 或者云服务的费用。

• 专业出版级品质
  ：75 套模板都配好了完整的设计系统约束。这意味着，无论你选哪一套，出来的作品视觉品质都差不了。

• 跨平台一键发布
  ：一键适配微信、X、小红书、知乎这些国内主流平台。跨平台排版这件事，基本被它一步到位了。

• 本地隐私安全保障
  ：所有数据都是本地优先处理，内容不上传云端。再加上沙箱预览机制，隐私安全这块可以放心。

HTML Anything的项目地址

• GitHub仓库
  ：https://github.com/nexu-io/html-anything

HTML Anything的同类竞品对比

如果要和其他工具对比，可以从几个维度来看：

：HTML Anything 是 Agent 驱动的本地多形态 HTML 编辑器；而 Marp 是开源的 Markdown 转 HTML 幻灯片引擎；reveal.js 是开源的 HTML 演示框架。
：HTML Anything 能自动识别 18 种本地 Code Agent，零 API 成本复用会话；Marp 和 reveal.js 都没有原生的 AI 能力，前者需要手动写 Markdown，后者需要手动写 HTML 或 Markdown。
：HTML Anything 支持 11 种文件格式上传，由 Agent 自动生成 HTML；Marp 仅支持 Markdown 文件输入；reveal.js 原生支持 HTML，通过插件也能支持 Markdown。
：HTML Anything 能生成杂志、演示、海报、卡片、简历、视频等 9 种交付形态；Marp 和 reveal.js 都只生成 HTML 幻灯片。
：HTML Anything 有 75 套模板，里面都包含了 CJK 优先字体栈和严格的排版约束；Marp 通过 CSS 主题自定义样式；reveal.js 有多种内置主题，但细节需要自己调。
：HTML Anything 能一键导出微信、X、小红书、知乎等原生适配格式；Marp 只能导出为 HTML、PDF 或 PPTX；reveal.js 可以导出为 HTML 或部署为静态网页。
：HTML Anything 基本是零代码操作，上传文件后 Agent 自动完成排版；Marp 需要你掌握 Markdown 语法和主题配置；reveal.js 则需要掌握 HTML/CSS 或 Markdown 插件配置。

HTML Anything的应用场景

具体的应用场景其实很广，这里举几个例子：

• 自媒体内容排版
  ：自媒体运营者可以把自己的 Markdown 草稿一键转成适合微信公众号、小红书、Twitter 的精美排版内容。省时省力，关键在于它适配得好。

• 商业演示制作
  ：职场人士可以用瑞士国际主义、贵藏编辑这类风格模板，快速生成专业级商业演示文稿。不用再纠结于PPT里的排版细节。

• 数据报告可视化
  ：数据分析师可以把 CSV 或 Excel 数据丢进去，自动生成带有专业图表和排版的交互式 HTML 数据报告。而且交互式意味着，你还能点开看细节。

• 视频分镜脚本
  ：视频创作者可以通过 Hyperframes 模板，生成可以直接拿去 Remotion 或 HeyGen 渲染的视频分镜脚本。省掉中间很多重复劳动。