HTML Anything

Markdown is the draft. HTML is what humans read. Your local agent writes it. The agentic HTML editor — in the agentic era, you don't hand-edit docs anymore, so the output format should be what the reader actually wants: HTML. Local-first, zero API key, reuses the CLI session you already have logged in — 9 coding-agent CLIs auto-detected on your PATH (Claude Code · Cursor Agent · Codex · Gemini CLI · GitHub Copilot CLI · OpenCode · Qwen Coder · Aider · IBM Bob), driven by 75 composable skill templates across 9 deliverable surfaces (magazine articles · keynote decks · résumés · posters · Xiaohongshu cards · tweet cards · web prototypes · data reports · Hyperframes videos). One-click export to WeChat / X / Zhihu, or download .html / .png.

Showcase

The eight skills that surface at the top of the picker's Featured / 推荐 group — sorted by their recommended: rank in SKILL.md frontmatter (lower = higher). Each ships a real example.html you can open straight from the repo, no auth, no setup.

The full skill catalog (organized by mode) is in Skills below.

Why this exists

Anthropic's Claude Code team announced they stopped writing internal docs in Markdown — they ship HTML now. The argument is simple:

HTML is the final form for humans. Markdown is just an intermediate state during writing.

But "writing HTML" used to mean writing CSS, picking type scales, snapping to a grid, doing responsive — most users won't, designers won't bother, writers don't have the patience. So what we built: after you press ⌘+Enter, your local AI agent turns any input (Markdown / CSV / Excel / JSON / SQL / raw notes) into a ship-ready single-file HTML in seconds, then one-click sends it to WeChat / X / Zhihu / anywhere. "Ship-ready" is the bar — when generation finishes, the artifact is what your audience actually sees. No "I'll touch it up later" pass.

We stand on four open-source shoulders:

• nexu-io/open-design — the agent-detection layer, the design-system model, and the SKILL.md protocol. next/src/lib/agents/ and next/src/lib/templates/skills/* mirror this architecture directly.
• mdnice/markdown-nice — proof that juice-inlined CSS pastes cleanly into WeChat and Zhihu without per-platform manual fix-up.
• gcui-art/markdown-to-image — the iframe → high-DPI PNG export path.
• alchaincyf/huashu-md-html — the anti-AI-slop discipline that maps into the hard constraints inside every SKILL.md (CJK-first font stack, 8 px baseline grid, contrast ≥ 4.5, must-use-real-data rule).

At a glance

Demo

Quickstart

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

Open the browser → the top bar auto-detects whichever coding-agent CLI you already have signed in → pick a template → paste content → ⌘+Enter.

No API key required. We reuse the session you already have logged in (Claude / Cursor / Codex / Gemini / Copilot subscriptions all work).

Workspace

This repo is a small pnpm workspace:

• next/ is the complete Next app (@html-anything/next).
• e2e/ is the browser-test package (@html-anything/e2e) and the only source of truth for Playwright cases.
• root owns CI, docs, and scripts/guard.ts; root package.json intentionally does not proxy app or e2e commands.

Run package commands from the repo root:

pnpm exec tsx scripts/guard.ts
pnpm -F @html-anything/next dev
pnpm -F @html-anything/next typecheck
pnpm -F @html-anything/next test
pnpm -F @html-anything/next build
pnpm -F @html-anything/e2e typecheck
pnpm -F @html-anything/e2e test

Supported coding agents

On startup we scan PATH (including ~/.local/bin, ~/.bun/bin, /opt/homebrew/bin, ~/.npm-global/bin — directories normally missed by GUI-launched Node) and surface every CLI we recognize:

The detection strategy and per-CLI adapter shape are borrowed directly from nexu-io/open-design and multica-ai/multica: one privileged process spawns CLIs, JSON-line is the wire protocol, every CLI gets a thin adapter in next/src/lib/agents/argv.ts.

If you've already done claude login / cursor login / gemini auth in your terminal, HTML Anything reuses that session. No second copy of the API key required.

Skills

75 skills under next/src/lib/templates/skills/, each a folder following the Claude Code SKILL.md convention plus an extended frontmatter (mode · scenario · surface · preview · design_system).

The two axes the picker uses:

• mode — prototype (web / SaaS landing / dashboard / data report / résumé / doc) · deck (20 horizontal-swipe presentations) · frame (10 Hyperframes motion frames) · social (4 social-card formats) · office (PM / engineering / finance / HR / operations document surfaces).
• scenario — design · marketing · engineering · product · finance · hr · sale · personal. Used to group skills in the picker.

Web prototypes & marketing pages (prototype mode)

Decks (deck mode, 20 skills)

Hyperframes video frames & VFX & device mockups (frame / vfx / mockup, 12 skills)

Frame scripts conform to the heygen-com/hyperframes spec and hand off straight to remotion-dev/remotion to render .mp4.

Social share cards (social mode)

Office & operations (office / doc mode)

Adding a skill takes one folder. Copy a similar skill, edit its SKILL.md frontmatter, restart pnpm -F @html-anything/next dev, the picker shows it. See CONTRIBUTING.md for the bar a skill PR has to clear before we merge.

Six load-bearing ideas

1 · We don't ship an agent. Yours is good enough.

On boot the browser calls /api/agents. The server scans PATH — including the dirs a GUI-launched Node usually misses (~/.local/bin, ~/.bun/bin, /opt/homebrew/bin, ~/.npm-global/bin) — and surfaces whichever CLIs it finds. Each CLI has one adapter (argv + stdin protocol + stream parser) in next/src/lib/agents/argv.ts. The whole detection model is borrowed directly from nexu-io/open-design and multica-ai/multica: one privileged process spawns CLIs, JSON-line is the wire protocol.

2 · Skills are folders, not plugins.

Following Claude Code's SKILL.md convention — SKILL.md + assets/ + references/ + example.html. Drop a folder into next/src/lib/templates/skills/, restart pnpm -F @html-anything/next dev, the picker shows it. deck-guizang-editorial is vendored directly from op7418/guizang-ppt-skill with original LICENSE and authorship preserved.

3 · Hard constraints stop the model from freestyling.

Every template hardcodes:

• CJK-first font stack — Noto Sans/Serif SC / source-han for Chinese, Inter / Manrope for Latin.
• 8 px baseline grid — every spacing, line-height, font-size is a multiple of 8.
• Rounded corners · soft shadow · no pure black / pure white — visual de-slop-ification.
• Color contrast ≥ 4.5, every interactive element has a real :focus state.
• Must use the user's real data, no lorem ipsum.

The discipline is lifted from alchaincyf/huashu-design's Junior-Designer mode + anti-AI-slop checklist. Constraints belong in the prompt — every SKILL.md writes them in.

4 · Streaming render = watch the AI draw.

POST /api/convert is SSE. The agent's stdout is line-delimited JSON; the server pulls out the text deltas and re-emits them as SSE events; the client appends to the iframe's srcdoc. The whole experience is the same as watching the agent type in a terminal, except the artifact is HTML, not Markdown. Interrupt at any time — you're not paying for a whole generation you don't want.

5 · One-click export = zero second-pass formatting.

• WeChat MP — juice inlines CSS + data-tool markers → paste into the editor, styles survive end to end.
• X / Weibo / Xiaohongshu — modern-screenshot renders the iframe to a 2× PNG → ClipboardItem → drop straight into the composer.
• Zhihu — same as above, plus <mjx-container> is replaced with data-eeimg LaTeX-image placeholders (Zhihu won't render KaTeX live — math has to be an image).
• Download .html / download .png — self-contained single file, shareable anywhere.

Mechanically inspired by mdnice/markdown-nice and gcui-art/markdown-to-image.

6 · Sandboxed iframe = secure + isolated.

User-emitted HTML always renders inside <iframe sandbox="allow-scripts allow-same-origin">. Third-party scripts (Tailwind CDN, Google Fonts, custom animations) still execute, but cookies and localStorage stay in the iframe's own origin — the host page is never poisoned. Opening devtools only shows the iframe's DOM, so the debugging experience matches a standalone HTML file.

Architecture

┌─────────────────────── Browser (Next.js 16) ──────────────────────┐
│  Editor / upload · top-bar agent picker · template picker · iframe │
└─────────────┬──────────────────────────────────┬──────────────────┘
              │ ⌘+Enter                            │
              ▼                                    ▼
     ┌─────────────────────┐            ┌──────────────────────┐
     │  GET /api/agents    │            │  POST /api/convert   │
     │  scan PATH, list    │            │  SSE — spawn CLI     │
     │  installed CLIs     │            │  pipe stdin / stdout │
     └─────────────────────┘            └──────────┬───────────┘
                                                   │ spawn + stdin pipe
                                                   ▼
                                ┌────────────────────────────────────┐
                                │  Your local coding-agent CLI       │
                                │  claude / codex / cursor-agent /   │
                                │  gemini / copilot / opencode /     │
                                │  qwen / aider                      │
                                │  → reuses your existing session    │
                                └────────────────────────────────────┘
                                                   │
                                                   ▼
                                stdout JSON-line ──► SSE event
                                                   │
                                                   ▼
                              iframe srcdoc append (live)
                                                   │
                              ⌘+C copy → ClipboardItem
                              ⌘+S download → .html / .png

Export targets

Roadmap

• Multi-template compare preview — generate four candidates of the same brief, pick the best one
• Hyperframes → mp4 — one-click hand-off of frame scripts to Remotion for real video output
• Shared design systems — interop with nexu-io/open-design DESIGN.md assets
• Template marketplace — community-contributed prompts & examples
• **Browser extensio