HTML Anything是什么
HTML Anything 是 nexu-io 团队开源的 Agent 时代 HTML 编辑器，内置 75 套 Skill 模板覆盖杂志、演示、海报、小红书卡片等 9 种交付形态，可自动识别本地 18 种 Code Agent CLI 并复用已登录会话，零 API Key 将任意内容转换为可一键发布至微信、X、知乎等平台的专业级 HTML。
阅读目录
HTML Anything的主要功能
- 75 套 Skill 模板覆盖 9 种交付形态：内置 75 套可组合 Skill 模板，覆盖杂志文章、Keynote 演示、简历、海报、小红书卡片、推文卡片、Web 原型、数据报告、Hyperframes 视频等 9 种专业交付形态。
- 18 种本地 Code Agent 自动识别：自动扫描本地 PATH 识别 18 种 Code Agent CLI（Claude Code、Cursor、Codex、Gemini 等），直接复用已登录会话而无需配置 API Key。
- 11 种主流文件格式上传支持：支持上传 Markdown、TXT、CSV、Excel、JSON、SQL、YAML、HTML、PNG、JPG 等 11 种主流文件格式作为内容输入源。
- SSE 流式实时渲染：采用 SSE（Server-Sent Events）协议将本地 Agent 生成的 HTML 代码实时推送至浏览器，实现边生成边预览的流式体验。
- iframe 沙箱安全预览：用户生成的 HTML 在独立 iframe 沙箱中运行，与主进程完全隔离，保障预览环境安全可靠。
- 一键多平台导出发布：提供微信公众号 CSS 内联粘贴、X/微博/小红书 2× DPI PNG、知乎 LaTeX 处理、单文件 HTML 下载等多种一键导出方式。
微信关注回复 “开源”，加入AI开源项目交流群
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启动本地开发服务器，浏览器访问https://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 | Marp | reveal.js |
|---|---|---|---|
| 产品定位 | Agent 驱动的本地多形态 HTML 编辑器 | 开源 Markdown 转 HTML 幻灯片引擎 | 开源 HTML 演示框架 |
| AI 集成 | 自动识别 18 种本地 Code Agent，零 API 成本复用会话 | 无原生 AI 能力，需手动编写 Markdown | 无原生 AI 能力，需手动编写 HTML/Markdown |
| 输入格式 | 支持 11 种文件格式上传，由 Agent 自动生成 HTML | 仅支持 Markdown 文件输入 | 原生支持 HTML，通过插件支持 Markdown |
| 输出形态 | 杂志、演示、海报、卡片、简历、视频等 9 种交付形态 | 仅生成 HTML 幻灯片 | 仅生成 HTML 幻灯片 |
| 设计系统 | 75 套模板含 CJK 优先字体栈与严格排版约束 | 通过 CSS 主题自定义样式 | 提供多种内置主题，需自行调整细节 |
| 平台发布 | 一键导出微信、X、小红书、知乎等原生适配格式 | 导出为 HTML、PDF 或 PPTX | 导出为 HTML 或部署为静态网页 |
| 使用门槛 | 零代码操作，上传文件后 Agent 自动完成排版 | 需掌握 Markdown 语法和主题配置 | 需掌握 HTML/CSS 或 Markdown 插件配置 |
HTML Anything的应用场景
- 自媒体内容排版：自媒体运营者可将 Markdown 草稿一键转换为适配微信公众号、小红书、Twitter 的精美排版内容。
- 商业演示制作：职场人士用瑞士国际主义、贵藏编辑等风格模板快速生成专业级商业演示文稿。
- 数据报告可视化：数据分析师将 CSV 或 Excel 数据转换为带有专业图表和排版的交互式 HTML 数据报告。
- 视频分镜脚本：视频创作者通过 Hyperframes 模板生成可直接用于 Remotion 或 HeyGen 渲染的视频分镜脚本。
