html-anything

_{From the team behind Open Design — 40k★ · 200+ contributors, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, Open Design is where the same team ships at scale.}

Live page: open-design.ai/html-anything/ — overview, surface modes, and showcase before you clone.

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.

English · 简体中文

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.

deck-guizang-editorial · deck · recommended: 1 Magazine × e-ink editorial deck, inspired by op7418/guizang-ppt-skill — 10 locked layouts × 5 palettes (Ink / Indigo Porcelain / Forest Ink / Kraft / Dune). Reads like a printed art-zine, not a slide deck.	deck-swiss-international · deck · recommended: 2 Swiss International deck — 16-column grid + one saturated accent (Klein Blue / Lemon / Mint / Safety Orange) across 22 locked layouts. Cold, rational, institutional. The deck that reads "a designer made this" the moment it opens.
doc-kami-parchment · doc · recommended: 3 Warm-parchment editorial document, inspired by tw93/kami. #f5f4ed ground + ink-blue accent + single serif voice — a noticeably calmer reading surface than plain-white markdown for long essays, reports, and one-pagers.	magazine-poster · poster · recommended: 4 Newsprint Sunday-paper poster — oversized serif headline, two-column body, six numbered sections, dot-pattern cream ground. Reads like a printed broadsheet, not a webpage.
video-hyperframes · frame / video · recommended: 5 Hyperframes / Remotion-compatible storyboard — 6–10 sequential 1920×1080 frames with hidden duration + transition markers and an auto-play script. Hand straight to heygen-com/hyperframes or Remotion to render .mp4.	frame-glitch-title · frame · recommended: 6 Glitch title frame — cyan/magenta chromatic offset, CRT scanlines, corrupted-data subtitle, ASCII noise in the corners. Cyberpunk hero card or video transition.
vfx-text-cursor · vfx · recommended: 7 VFX text-cursor opener — a cursor "types" across the canvas, each character revealed with a hot-pink × cyan chromatic trail and directional light leaks. Drop in a quote, get a film-grade opening frame.	frame-logo-outro · frame · recommended: 8 Logo outro frame — logo assembles piece-by-piece with glow bloom, tagline rises, CTA appears. The closing card for a product reveal or brand film.

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

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).

Entry view — the top bar shows your installed CLIs, the left pane is the editor, the middle is the template + design-system picker, the right is a live iframe preview. The same surface produces magazines, decks, posters, web prototypes, and Hyperframes frame scripts.	75 templates, searchable and filterable — pick by mode (prototype / deck / frame / social / office / doc) × scenario (design / marketing / engineering / product / personal). Every skill ships an example.html you can open straight from the repo to see what the agent will produce.
SSE streaming — agent stdout JSON-line is parsed for text deltas, appended into the iframe srcdoc in real time. You watch the page render line by line. Don't like where it's going? Interrupt and re-prompt — no wasted full generation.	One-click export — WeChat (juice-inlined CSS) · X / Weibo / Xiaohongshu (modern-screenshot → 2× PNG → ClipboardItem) · Zhihu (LaTeX image placeholders) · download .html · download .png. Paste straight in, no second pass of manual formatting.
Deck mode — 20 keynote skills, including Swiss International (Helvetica grid maximalism), Guizang Editorial (magazine ink), Open Slide Canvas (1920×1080 agent-native), Magazine Web, XHS Pastel, Hermes Cyber, Replit Style. ←/→ to navigate slides, presenter notes, PDF export.	Hyperframes frames — 10 motion frame scripts (liquid hero, NYT data chart, sticky-note flowchart, glitch title, cinema light-leak, macOS notification, brand logo outro, text-cursor VFX, 3D device mockup, …) conforming to heygen-com/hyperframes; hand off straight to Remotion to render .mp4.

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).

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

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.

Floatboat is available as an in-app community integration. Install the html-anything Combo Skill from the Floatboat Combo Skill Store, then use it inside Floatboat.

In-app workflow — Review the task context, HTML Anything workspace, and generated page side by side in Floatboat.

Deliverable preview — Turn a brief into a polished HTML page and review the result in Floatboat.

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.

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

For source-backed X / Twitter cards, capture the tweet text, author, reply counts, likes, views, media URLs, and thread context with TweetClaw, then paste that packet into social-x-post-card or card-twitter. Keep HTML Anything responsible for visual rendering and export; keep scraping, approval, and publishing in your own workflow.

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.

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.

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.

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.

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.

• 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.

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.

┌─────────────────────── 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

• 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 extension — select on any page → convert to HTML template
• History / version diff / IndexedDB archive
• More export targets — WeChat Channels · Douyin captions · Notion · Linear · Telegraph

Early but real. The closed loop — detect agent → pick skill → SSE stream → sandboxed iframe preview → one-click export — runs end-to-end against all 8 CLIs listed above. The skill library and the SKILL.md hard-constraints are where most of the leverage lives, and both are stable. The picker UX, design-system metadata, and the multi-template compare flow ship daily. If something looks broken on your machine, open an issue with the agent CLI you were using and the input — those are the bug reports that move things forward fastest.

The Next API surface is the local-only side of the app — /api/convert spawns the user's coding-agent CLI with maximally permissive flags, /api/deploy writes credentialed config to disk. Both are intended for a single operator on a single machine. To prevent a malicious page from DNS-rebinding attacker.example to 127.0.0.1 and POSTing into those routes through the user's browser, every /api/* request is gated on a Host-header allowlist in next/src/middleware.ts.

Set the env var in whatever environment file your launcher reads (e.g. next/.env.local). The middleware is pinned to the Node runtime (export const runtime = "nodejs" in next/src/middleware.ts) so process.env is read per-request — Edge middleware can inline process.env.* at build time, which would silently break operator overrides set after next build. The validation is unit-tested in next/src/lib/security/host-validation.test.ts and the loopback-still-works dev path is exercised in the Playwright spec at e2e/ui/host-validation.spec.ts.

Issues, PRs, new skills, new agent adapters, new export targets, and translations are all welcome. The highest-leverage contributions are usually one folder, one Markdown file, or one PR-sized adapter — small surface area, big leverage. Pick the slot that matches what you want to add:

• Add a skill — drop a folder into next/src/lib/templates/skills/ with SKILL.md + example.html (+ optional assets/ and references/). The picker auto-discovers it after pnpm -F @html-anything/next dev restart. The SKILL.md frontmatter has to set mode · scenario · surface · preview · design_system — copy a neighbour and edit.
• Wire up a new coding-agent CLI — one entry in next/src/lib/agents/argv.ts covering: detection binary, argv builder, stdin/stdout protocol, stream parser. Detection is exercised by next/src/app/api/agents/ and the spawn loop by next/src/app/api/convert/.
• Add an export target — drop a module under next/src/lib/export/ (next to wechat.ts / image.ts / clipboard.ts) and add the button to the export menu. WeChat Channels · Douyin captions · Notion · Linear · Telegraph · RSS are all open.
• Sharpen a SKILL.md — strengthen the hard-constraints (CJK font stack, 8 px baseline, contrast ≥ 4.5, must-use-real-data), add a 5-dimensional self-critique, swap in a better palette. Anti-AI-slop discipline is the most underrated PR shape we accept.
• Translations & docs — README.zh-CN.md and CONTRIBUTING.zh-CN.md are kept in parallel with the English files; please update both.

Full walkthrough, bar-for-merging, code style, and what we don't accept → CONTRIBUTING.md (简体中文).

Every external project this repo borrows from — what we take from each, and where it lands in the tree.

Each bundled upstream skill retains its original LICENSE and authorship inside its own next/src/lib/templates/skills/<skill>/ folder.

Follow @nexudotio on X for release notes, new skills, and the occasional behind-the-scenes thread on what's shipping next. The HTML Anything Discord channel is where demos, template requests, export/debugging questions, and bigger community conversations happen — run by the upstream open-design team.

Thanks to everyone who has filed an issue, opened a PR, or added a skill / agent adapter / export target. Every real contribution counts, and the wall below is the easiest way to say so out loud.

If you've shipped your first PR — welcome. The good-first-issue / help-wanted labels are the entry point.

If the curve bends up, that's the signal we look for. ★ this repo to push it.

Apache-2.0 © 2026 HTML Anything contributors. See LICENSE.

Bundled work retains its original license and authorship attribution — see the per-skill LICENSE / README.md inside each next/src/lib/templates/skills/<skill>/ folder for what it inherits from upstream.