HTML Anything: The Agentic HTML Editor

HTML Anything (2.4k+ stars) is an open-source, agent-driven HTML editor from the team behind Open Design (40k+ stars). It reuses your local AI agent CLI to turn markdown, CSV, JSON, or raw notes into ship-ready single-file HTML in seconds. No API key, no upload, no second pass of formatting.

Built on the premise that HTML is the final form for humans; markdown is just an intermediate state during writing.

Why This Exists

Anthropic’s Claude Code team stopped writing internal docs in markdown and now ships HTML. The argument: markdown is good for the writer, but HTML is good for the reader. Layout-limited renderers can’t match the design control of raw HTML, and markdown looks terrible screenshotted into a tweet or pasted into WeChat.

But hand-editing HTML means writing CSS, picking type scales, snapping to grids, doing responsive. Most users won’t bother. HTML Anything bridges this by letting your local AI agent do the rendering. You write in whatever format you want (markdown, CSV, raw notes), press ⌘+Enter, and a ship-ready HTML artifact appears.

Key Features

🎯 8 Coding-Agent CLIs, Auto-Detected

Scans your PATH (including ~/.local/bin, ~/.bun/bin, /opt/homebrew/bin, ~/.npm-global/bin) for installed agents and surfaces them in a top-bar picker:

Claude Code · Cursor Agent · OpenAI Codex · Gemini CLI
GitHub Copilot CLI · OpenCode · Qwen Coder · Aider

Your existing login session is reused, zero API key and zero marginal cost beyond your existing subscription.

🧩 75 Skill Templates Across 9 Surfaces

Surface	Examples
prototype	Web pages, SaaS landings, dashboards, wireframes, pricing pages
deck	Swiss International, Guizang Editorial, XHS Pastel, Hermes Cyber, Replit-style (20 skills)
frame	Hyperframes video frames: glitch titles, liquid heroes, NYT data charts, logo outros (10 skills)
social	X quote cards, Spotify-Wrapped cards, Reddit cards, Xiaohongshu carousels
office	PM specs, engineering runbooks, finance reports, invoices, OKRs, kanban boards
doc	Kami warm-parchment editorial documents
vfx	Text-cursor cinematic effects
mockup	3D device-frame mockups
poster	Newsprint magazine posters

Every skill ships with an example.html you can open directly from the repo, no setup required.

🔄 Streaming Render (SSE)

POST /api/convert streams the agent output via Server-Sent Events. The agent’s stdout JSON-line is parsed for text deltas and appended into a sandboxed iframe srcdoc in real time. You watch the page render line by line, and can interrupt at any point without waiting for a full generation.

📤 One-Click Export, Zero Second-Pass

WeChat MP: juice inlines CSS into the HTML, paste directly into the editor
X / Weibo / Xiaohongshu: modern-screenshot renders to 2× PNG → ClipboardItem → paste into the composer
Zhihu: <mjx-container> replaced with data-eeimg LaTeX-image placeholders
Download: standalone .html or high-DPI .png

🛡️ Sandboxed Preview

Generated HTML renders inside <iframe sandbox="allow-scripts allow-same-origin">. External scripts and fonts work, but cookies and localStorage stay isolated from the host page.

📊 Format Auto-Detect

The editor accepts markdown, CSV, TSV, JSON, SQL, or plain text. Tabular data is parsed client-side with papaparse + xlsx, nothing is uploaded.

Six Load-Bearing Ideas

We don’t ship an agent. Yours is good enough. Reuses whatever CLI you already have logged in.
Skills are folders, not plugins. Drop a SKILL.md folder into src/lib/templates/skills/, restart dev, the picker shows it.
Hard constraints stop the model from freestyling. Every template locks a CJK-first font stack, 8px baseline grid, contrast ≥ 4.5, no pure black/white, and a “must use real data” rule.
Streaming render = watch the AI draw. SSE updates the iframe srcdoc line by line. Interrupt and re-prompt freely.
One-click export = zero second-pass formatting. Inline CSS for WeChat, 2× PNG for social platforms, LaTeX placeholders for Zhihu.
Sandboxed iframe = secure + isolated. User code runs in its own origin; devtools shows only the iframe’s DOM.

Quickstart

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000

Open the browser, pick a template from the 75-skill picker, paste your content, and press ⌘+Enter. No API key required.

Architecture

  Browser (Next.js 16) → POST /api/convert (SSE)
                         → child_process.spawn → your local agent CLI
                           → stdout JSON-line → SSE event
                             → iframe srcdoc append (live)
                               → ⌘+C copy / ⌘+S download

Frontend: Next.js 16 App Router + Turbopack · React 19 · Tailwind v4 · zustand
Agent transport: child_process.spawn with one stdin/stdout adapter per CLI
Browser-side: juice (CSS), modern-screenshot (PNG), xlsx/papaparse (spreadsheets), marked + highlight.js (markdown), dompurify (XSS)
Deploy: Local pnpm dev or Vercel for the web layer (agent stays on your laptop)

Why This Tool Rocks

Zero API Key Required: Reuses your existing agent session (Claude, Codex, Gemini, etc.)
75 Composable Templates: Magazines, decks, posters, social cards, docs, prototypes, video frames
9 Output Surfaces: From tweet cards to keynote decks to Hyperframes MP4 videos
8 Supported Agent CLIs Claude Code, Cursor, Codex, Gemini, Copilot, OpenCode, Qwen, Aider
Streaming Live Preview: Watch the agent render in real time, interrupt anytime
One-Click Social Export: WeChat, X, Zhihu, Xiaohongshu, no second pass of formatting
Privacy-First: All processing happens locally; nothing leaves your machine
Open Source: Apache-2.0 license, built on open-design and 4 other open-source projects
Extensible Skill System: Add your own templates as folders, no plugin architecture needed

🔗 GitHub: github.com/nexu-io/html-anything

🔗 Website: html-anything.vercel.app

Crepi il lupo! 🐺