html-anything — Agentic HTML Editor
What it is
html-anything is an agentic HTML editor from the nexu-io team (the same team behind Open Design, 40k+ stars). It turns any AI coding agent CLI into an HTML publishing engine.
The pitch: Markdown is the draft. HTML is what humans read. Your local agent writes it. One-click ship to WeChat/X/Zhihu/PNG.
Quick facts
- Repo: https://github.com/nexu-io/html-anything
- Stars: 7,700+ (as of July 2026)
- License: Apache-2.0
- Install:
npm install -g @nexu-io/html-anything
- Runs on: Local (
pnpm dev) or Vercel (agent stays on your laptop)
Supported coding agents
Auto-detected on PATH (including ~/.local/bin, ~/.bun/bin, /opt/homebrew/bin, ~/.npm-global/bin):
| Agent |
Detection |
Invocation |
| Claude Code |
claude |
claude -p --output-format stream-json |
| OpenAI Codex |
codex |
codex exec --json --sandbox workspace-write |
| Cursor Agent |
cursor-agent |
cursor-agent --print --output-format stream-json --force --trust |
| Gemini CLI |
gemini |
gemini --output-format stream-json --yolo |
| GitHub Copilot |
copilot |
copilot --allow-all-tools --output-format json |
| OpenCode |
opencode-cli / opencode |
opencode run --format json --dangerously-skip-permissions - |
| Qwen Coder |
qwen |
qwen --yolo - |
| Aider |
aider |
aider --no-pretty --no-stream --yes-always --message-file - |
No API key needed. Reuses your existing CLI auth (claude login, cursor login, etc.).
75 skills × 9 surfaces
Skills live under src/lib/templates/skills/ and follow the Claude Code SKILL.md convention with extended frontmatter (mode, scenario, surface, preview, design_system).
Surfaces
| Surface |
Mode |
Skills |
| 📖 Magazine article |
prototype |
7-12 |
| 🎬 Keynote deck |
deck |
20 (Swiss International, Guizang Editorial, XHS Pastel, Hermes Cyber, Replit, Magazine Web...) |
| 📄 Résumé |
prototype |
Multiple |
| 🖼️ Poster |
prototype |
Multiple |
| 📱 Xiaohongshu card |
social |
Multiple |
| 🐦 Tweet card |
social |
Multiple |
| 🛠️ Web prototype |
prototype |
web, SaaS landing, dashboard, data report |
| 📊 Data report |
prototype |
Multiple |
| 🎞️ Hyperframes video |
frame |
10 (liquid hero, NYT data chart, sticky-note flowchart, glitch title, cinema light-leak, macOS notification, logo outro...) |
Office skills
pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, okrs, weekly-update, meeting-notes, kanban
One-click export targets
| Target |
Method |
| WeChat |
juice CSS inlining → paste with zero re-formatting |
| X/Twitter |
modern-screenshot → 2× PNG → ClipboardItem |
| Zhihu |
<mjx-container> → data-eeimg placeholder (equations auto-render) |
| HTML download |
Standalone .html |
| PNG download |
High-DPI .png |
Architecture
Layer | Stack
------|------
Frontend | Next.js 16 App Router + Turbopack · React 19 · Tailwind v4 · zustand
Agent transport | `child_process.spawn` · one adapter per CLI
Browser processing | `juice` (CSS inline) · `modern-screenshot` (PNG) · `xlsx`/`papaparse` · `marked` + `highlight.js` · `dompurify`
Preview | `iframe[sandbox="allow-scripts allow-same-origin"]` + `srcdoc`
Export | `.html` standalone · `.png` high-DPI · `ClipboardItem` (text/html + image/png)
## Why it matters for AI agents
1. **BYOK is proven at scale.** 7,700+ stars, the same team behind Open Design (40k stars). The paradigm of reusing existing CLI auth works.
2. **Skills = portable agent knowledge.** 75 SKILL.md templates that any MCP-compatible agent can consume. Fork them into your own projects.
3. **Ship-ready bar.** The artifact IS the deliverable — no "I'll touch it up later" pass. This forces quality into the generation loop.
4. **Sister to Open Design.** html-anything for one-shot HTML publishing; Open Design for persistent design systems. Same team, same protocol, different scope.
5. **Hermes-compatible.** The dappweb community fork of Open Design already supports Hermes ACP — html-anything likely follows the same adapter pattern.
## Relevant for Hermes users
Html-anything detects agent CLIs on PATH. Hermes could be added as an adapter by following the pattern in `src/lib/agents/argv.ts`. The SKILL.md protocol html-anything uses is the same format Hermes skills use — templates are portable.
## Relationship to Open Design
| | html-anything | Open Design |
|---|---|---|
| Scope | One-shot HTML artifacts | Persistent design systems |
| Surfaces | 9 publishable surfaces | Web/mobile/desktop prototypes |
| Skills | 75 templates | 31 templates |
| Design systems | Skill-embedded | 129 DESIGN.md files |
| Daemon | No daemon | Local daemon + SQLite |
| Same team? | Yes (nexu-io) | Yes (nexu-io) |
| License | Apache-2.0 | Apache-2.0 |
1---2name: agentic-webdesign-html-anything3description: Install and use html-anything — the agentic HTML editor where your local AI agent writes HTML and you ship it. 75 skills × 9 surfaces, BYOK, zero API key. Use when building magazine articles, keynote decks, resumes, posters, social cards, web prototypes, data reports, or Hyperframes videos with AI coding agents.4---56# html-anything — Agentic HTML Editor78## What it is910html-anything is an **agentic HTML editor** from the [nexu-io](https://github.com/nexu-io) team (the same team behind Open Design, 40k+ stars). It turns any AI coding agent CLI into an HTML publishing engine.1112**The pitch:** Markdown is the draft. HTML is what humans read. Your local agent writes it. One-click ship to WeChat/X/Zhihu/PNG.1314## Quick facts1516- **Repo:** https://github.com/nexu-io/html-anything17- **Stars:** 7,700+ (as of July 2026)18- **License:** Apache-2.019- **Install:** `npm install -g @nexu-io/html-anything`20- **Runs on:** Local (`pnpm dev`) or Vercel (agent stays on your laptop)2122## Supported coding agents2324Auto-detected on PATH (including `~/.local/bin`, `~/.bun/bin`, `/opt/homebrew/bin`, `~/.npm-global/bin`):2526| Agent | Detection | Invocation |27|-------|-----------|------------|28| Claude Code | `claude` | `claude -p --output-format stream-json` |29| OpenAI Codex | `codex` | `codex exec --json --sandbox workspace-write` |30| Cursor Agent | `cursor-agent` | `cursor-agent --print --output-format stream-json --force --trust` |31| Gemini CLI | `gemini` | `gemini --output-format stream-json --yolo` |32| GitHub Copilot | `copilot` | `copilot --allow-all-tools --output-format json` |33| OpenCode | `opencode-cli` / `opencode` | `opencode run --format json --dangerously-skip-permissions -` |34| Qwen Coder | `qwen` | `qwen --yolo -` |35| Aider | `aider` | `aider --no-pretty --no-stream --yes-always --message-file -` |3637**No API key needed.** Reuses your existing CLI auth (`claude login`, `cursor login`, etc.).3839## 75 skills × 9 surfaces4041Skills live under `src/lib/templates/skills/` and follow the Claude Code `SKILL.md` convention with extended frontmatter (`mode`, `scenario`, `surface`, `preview`, `design_system`).4243### Surfaces4445| Surface | Mode | Skills |46|---------|------|--------|47| 📖 Magazine article | `prototype` | 7-12 |48| 🎬 Keynote deck | `deck` | 20 (Swiss International, Guizang Editorial, XHS Pastel, Hermes Cyber, Replit, Magazine Web...) |49| 📄 Résumé | `prototype` | Multiple |50| 🖼️ Poster | `prototype` | Multiple |51| 📱 Xiaohongshu card | `social` | Multiple |52| 🐦 Tweet card | `social` | Multiple |53| 🛠️ Web prototype | `prototype` | web, SaaS landing, dashboard, data report |54| 📊 Data report | `prototype` | Multiple |55| 🎞️ Hyperframes video | `frame` | 10 (liquid hero, NYT data chart, sticky-note flowchart, glitch title, cinema light-leak, macOS notification, logo outro...) |5657### Office skills58`pm-spec`, `eng-runbook`, `finance-report`, `hr-onboarding`, `invoice`, `okrs`, `weekly-update`, `meeting-notes`, `kanban`5960## One-click export targets6162| Target | Method |63|--------|--------|64| WeChat | `juice` CSS inlining → paste with zero re-formatting |65| X/Twitter | `modern-screenshot` → 2× PNG → `ClipboardItem` |66| Zhihu | `<mjx-container>` → `data-eeimg` placeholder (equations auto-render) |67| HTML download | Standalone `.html` |68| PNG download | High-DPI `.png` |6970## Architecture7172```73Layer | Stack74------|------75Frontend | Next.js 16 App Router + Turbopack · React 19 · Tailwind v4 · zustand76Agent transport | `child_process.spawn` · one adapter per CLI77Browser processing | `juice` (CSS inline) · `modern-screenshot` (PNG) · `xlsx`/`papaparse` · `marked` + `highlight.js` · `dompurify`78Preview | `iframe[sandbox="allow-scripts allow-same-origin"]` + `srcdoc`79Export | `.html` standalone · `.png` high-DPI · `ClipboardItem` (text/html + image/png)8081## Why it matters for AI agents82831. **BYOK is proven at scale.** 7,700+ stars, the same team behind Open Design (40k stars). The paradigm of reusing existing CLI auth works.842. **Skills = portable agent knowledge.** 75 SKILL.md templates that any MCP-compatible agent can consume. Fork them into your own projects.853. **Ship-ready bar.** The artifact IS the deliverable — no "I'll touch it up later" pass. This forces quality into the generation loop.864. **Sister to Open Design.** html-anything for one-shot HTML publishing; Open Design for persistent design systems. Same team, same protocol, different scope.875. **Hermes-compatible.** The dappweb community fork of Open Design already supports Hermes ACP — html-anything likely follows the same adapter pattern.8889## Relevant for Hermes users9091Html-anything detects agent CLIs on PATH. Hermes could be added as an adapter by following the pattern in `src/lib/agents/argv.ts`. The SKILL.md protocol html-anything uses is the same format Hermes skills use — templates are portable.9293## Relationship to Open Design9495| | html-anything | Open Design |96|---|---|---|97| Scope | One-shot HTML artifacts | Persistent design systems |98| Surfaces | 9 publishable surfaces | Web/mobile/desktop prototypes |99| Skills | 75 templates | 31 templates |100| Design systems | Skill-embedded | 129 DESIGN.md files |101| Daemon | No daemon | Local daemon + SQLite |102| Same team? | Yes (nexu-io) | Yes (nexu-io) |103| License | Apache-2.0 | Apache-2.0 |
S3YED