nexu-io/html-anythingGit

HTML magazines, slides and posters

Turn Markdown into web pages, presentations and social graphics.

Before you start

Inputs: Outline, source material and layout requirements

Check the original documentation for supported AI tools, models and runtime dependencies.
Open the repository and follow the author’s installation instructions. Model APIs or external services may require separate accounts.
Try your own material, then review the facts, layout and output files.

Read the original installation guide ↗

License: Apache-2.0

Source snapshot: 2026-09-15. README ↗

Original license & copyright


                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

Try a task like this

Use HTML magazines, slides and posters with my own source material. Confirm the required inputs and available tools, then produce an editable result.

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 · 简体中文

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.

_{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.

Why this exists

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

Markdown	HTML
Good for the writer	Good for the reader
Layout limited to the renderer	Layout is yours
Looks ugly screenshotted into a tweet	Already looks like a designed image
Has to be re-flowed for WeChat / Zhihu / newsletter	One-click format conversion

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

	What you get
Coding-agent CLIs (8)	Claude Code · Cursor Agent · OpenAI Codex · Gemini CLI · GitHub Copilot CLI · OpenCode · Qwen Coder · Aider — scanned on startup across `PATH` (including `~/.local/bin`, `~/.bun/bin`, `/opt/homebrew/bin`, `~/.npm-global/bin` — directories a GUI-launched Node process normally misses), swap from the top-bar picker.
Zero API key	We reuse the session you already have logged in via `claude login` · `cursor login` · `gemini auth`. Your existing subscription does the work; marginal cost is $0.
75 skill templates	`prototype` (web / SaaS landing / dashboard / data report) · `deck` (20 keynote skills incl. Swiss International, Guizang Editorial, XHS Pastel, Hermes Cyber, Replit, Magazine Web…) · `frame` (10 Hyperframes video frames — liquid hero, NYT data chart, sticky-note flowchart, glitch title, cinema light-leak, macOS notification, logo outro…) · `social` (X / Xiaohongshu / Spotify / Reddit cards) · `office` (PM spec · eng runbook · finance report · HR onboarding · invoice · OKRs · weekly update · meeting notes · kanban) · `doc` (Kami warm-parchment editorial) · `mockup` (3D device frame) · `vfx` (text-cursor effect).
9 surface modes	📖 magazine article · 🎬 keynote deck · 📄 résumé · 🖼️ poster · 📱 Xiaohongshu card · 🐦 tweet card · 🛠️ web prototype · 📊 data report · 🎞️ Hyperframes video. Each has multiple skills you can pick from.
One-click export	`juice` inlines CSS → WeChat paste with zero re-formatting · `modern-screenshot` renders the iframe to a 2× PNG → `ClipboardItem` → drop straight into the tweet composer · `<mjx-container>` → `data-eeimg` placeholder → Zhihu equations render automatically · standalone `.html` download · high-DPI `.png` download.
Streaming render	`POST /api/convert` over SSE. The agent's stdout JSON-line stream is parsed for text deltas → server-sent events → client appends → iframe `srcdoc` updates live. Waiting for an AI generation looks like watching it type in real time.
Sandboxed preview	`<iframe sandbox="allow-scripts allow-same-origin">`. User-emitted HTML runs in an isolated origin — Tailwind CDN / Google Fonts / inline scripts work, but cookies and localStorage are quarantined from the host.
Format auto-detect	The editor accepts Markdown / CSV / TSV / JSON / SQL / plain text. `papaparse` + `xlsx` parse tabular data in the browser — nothing is uploaded.
Deployable to	Local (`pnpm -F @html-anything/next dev`) · Vercel for the web layer (the agent always stays on your laptop).
License	Apache-2.0

Demo

_{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.}

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:

Agent	Detection binary	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 CLI	`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 -`
IBM Bob	`bob`	`bob --output-format stream-json --hide-intermediary-output`

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)

Skill	Best for	Output
`prototype-web`	Generic web prototype (default)	Single-page HTML, 1440×900 desktop
`saas-landing`	SaaS landing page	Hero / features / pricing / CTA
`waitlist-page`	Waitlist / early-access page	Minimal form + social proof
`pricing-page`	Pricing page	Multi-tier comparison tables
`dashboard`	Admin / analytics console	Sidebar + dense data layout
`docs-page`	Technical documentation	3-column docs layout
`blog-post`	Long-form blog post	Editorial layout
`mobile-app`	iOS / Android prototype	iPhone 15 Pro chrome
`mobile-onboarding`	App onboarding flow	Splash · value · sign-in trio
`gamified-app`	Gamified app	Quest · XP · level trio
`dating-web`	Dating / matchmaking dashboard	Left rail · KPIs · 30-day chart
`magazine-poster`	Single-page magazine poster	1080×1920
`poster-hero`	Marketing poster	Single-page display poster
`web-proto-editorial`	Editorial-style web	Serif display + grid
`web-proto-brutalist`	Brutalist web	Hard edges, black & white, anti-grid
`web-proto-soft`	Soft / warm web	Soft shadows, rounded, warm palette
`article-magazine`	Long-form magazine article	A4 / long-page
`digital-eguide`	Digital e-guide	Cover + lesson spread
`resume-modern`	Minimal résumé	A4 210×297mm
`email-marketing`	Brand product-launch email	Center single-column, table fallback
`wireframe-sketch`	Hand-drawn wireframe	Early-pass ideation

Decks (deck mode, 20 skills)

Skill	Best for
`deck-swiss-international`	Swiss International deck
`deck-guizang-editorial`	Editorial-ink deck (from op7418/guizang-ppt-skill)
`deck-open-slide-canvas`	1920×1080 agent-native canvas (from 1weiho/open-slide)
`deck-magazine-web`	Magazine-style web deck
`deck-hermes-cyber`	Hermes Cyber neon-luxe
`deck-replit`	Replit-style product walkthrough
`deck-xhs-pastel`	Xiaohongshu pastel deck
`deck-xhs-white`	Xiaohongshu pure-white deck
`deck-xhs-post`	Xiaohongshu single-post deck
`deck-tech-sharing`	Tech-sharing deck
`deck-product-launch`	Product-launch event deck
`deck-pitch`	Investor pitch
`deck-blueprint`	Blueprint / roadmap
`deck-presenter-mode`	Speaker-notes-aware
`deck-course-module`	Course module deck
`deck-dir-key-nav`	Directional key-nav deep browse
`deck-graphify-dark`	Dark, data-graphic-heavy deck
`deck-obsidian-claude`	Obsidian / Claude-flavored notes
`deck-safety-alert`	Incident / safety briefing
`deck-simple`	Minimal horizontal-swipe deck

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

Skill	Best for
`frame-liquid-bg-hero`	Liquid background hero
`frame-data-chart-nyt`	NYT-style data chart
`frame-flowchart-sticky`	Sticky-note flowchart
`frame-glitch-title`	Glitch title card
`frame-light-leak-cinema`	Cinema light-leak
`frame-macos-notification`	macOS notification toast
`frame-logo-outro`	Brand logo outro
`motion-frames`	Generic motion-design frame
`video-hyperframes`	Hyperframes frame-script schema
`sprite-animation`	Pixel / 8-bit animation
`vfx-text-cursor`	Text-cursor VFX
`mockup-device-3d`	3D device-frame mockup

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)

Skill	Best for
`social-x-post-card`	X / Twitter quote card (1600×900)
`social-spotify-card`	Spotify-Wrapped style card
`social-reddit-card`	Reddit thread card
`social-carousel`	3-card 1080×1080 carousel
`card-xiaohongshu`	Xiaohongshu image-with-text card
`card-twitter`	Twitter pull-quote card
`social-media-dashboard`	Social-ops dashboard
`social-media-matrix`	Multi-platform content matrix

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.

Office & operations (office / doc mode)

Skill	Scenario	Best for
`doc-kami-parchment`	personal	Warm-parchment editorial doc (from tw93/kami)
`pm-spec`	product	PM spec doc + decision log
`team-okrs`	product	OKR scoresheet
`meeting-notes`	operation	Meeting decision log
`weekly-update`	operation	Team weekly cadence
`kanban-board`	operation	Board snapshot
`eng-runbook`	engineering	Incident runbook
`finance-report`	finance	Exec finance summary
`invoice`	finance	Single-page invoice
`hr-onboarding`	hr	Role onboarding plan
`data-report`	finance / product	CSV/Excel → visual data report
`live-dashboard`	operation	Live data dashboard
`flowai-team-dashboard`	operation	Team workflow dashboard
`ppt-keynote`	personal	Generic Keynote-style deck

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

Layer	Stack
Frontend	Next.js 16 App Router + Turbopack · React 19 · Tailwind v4 · zustand state
Server routes	`GET /api/agents` (detection) · `POST /api/convert` (SSE streaming spawn)
Agent transport	`child_process.spawn` · one stdin/stdout adapter per CLI (`next/src/lib/agents/argv.ts`)
Browser-side processing	`juice` (CSS inlining) · `modern-screenshot` (PNG export) · `xlsx` / `papaparse` (spreadsheet parsing) · `marked` + `highlight.js` (Markdown-compatible input) · `dompurify` (XSS defense)
Preview sandbox	`iframe[sandbox="allow-scripts allow-same-origin"]` + `srcdoc`
Export targets	`.html` standalone · `.png` high-DPI · `ClipboardItem` (text/html + image/png) · WeChat-compatible inlined CSS
Deploy	Local `pnpm -F @html-anything/next dev` · Vercel one-click for the web layer (agent stays local)

Export targets

Platform	Implementation	Paste behavior
WeChat MP	`juice` inlines CSS + `data-tool` markers	Paste into editor, zero re-formatting
Zhihu	Same as WeChat + `<mjx-container>` → `data-eeimg` LaTeX image placeholder	Equations render after upload
X / Weibo / Xiaohongshu	`modern-screenshot` → 2× PNG → `ClipboardItem`	Drop straight into the composer
Download `.html`	Single-file, inlined assets	Open anywhere with a browser
Download `.png`	High-DPI screenshot	Share anywhere

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

Status

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.

Surface	State
Agent detection (8 CLIs)	✅ stable
Skill registry + picker (75 skills)	✅ stable
SSE streaming render	✅ stable
Sandboxed iframe preview	✅ stable
One-click WeChat / X / Zhihu / `.html` / `.png` export	✅ stable
CSV / Excel / JSON / SQL format auto-detect	✅ stable
Multi-template compare (generate 4, pick 1)	🛠 in progress
Hyperframes → `.mp4` one-click handoff to Remotion	🛠 in progress
Browser extension (select on any page → convert)	⏳ planned
History / version diff / IndexedDB archive	⏳ planned
Skill marketplace (`install <github-repo>`)	⏳ planned

Security

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.

Setting	When to use
Default (no env vars set)	The common case — `next dev` / `next start` on your own machine. `127.0.0.1`, `localhost`, and `::1` Host headers (any port) are accepted. Everything else gets a 403 `{ "error": "Host not allowed" }`.
`HTML_ANYTHING_ALLOWED_HOSTS=daemon.mirage.local,html-anything.lan`	LAN / mDNS setup — you're reaching the app from another device on the same network and the browser dials a non-loopback hostname. Comma-separated; port-insensitive; case-insensitive. The default loopback set is still accepted on top of this.
`HTML_ANYTHING_ALLOW_ANY_HOST=1`	Reverse-proxy mode — Caddy / nginx / Cloudflare Tunnel is terminating the public hostname and forwarding to the app. The proxy is now responsible for Host policy. Loudly insecure if you set this without a trusted proxy in front, so it is not the default.

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.

Contributing

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 (简体中文).

References & lineage

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

Project	Role here
`nexu-io/open-design`	The agent-detection layer, the `DESIGN.md` design-system schema, and the `SKILL.md` skill protocol. `next/src/lib/agents/argv.ts` and `next/src/lib/templates/skills/` mirror this architecture verbatim.
`multica-ai/multica`	Daemon-and-runtime architecture: one privileged process spawns CLIs, JSON-line is the wire protocol, every CLI gets a thin per-adapter shape.
`alchaincyf/huashu-design`	Anti-AI-slop discipline — Junior-Designer mode, 5-step brand-asset protocol, contrast-≥-4.5 / 8 px baseline-grid / must-use-real-data rules. Hard-coded into every `SKILL.md` frontmatter.
`alchaincyf/huashu-md-html`	Proof that end-to-end WeChat / Zhihu paste-compatibility is solvable. Reference for `next/src/lib/export/wechat.ts`.
`mdnice/markdown-nice`	`juice`-inlined-CSS pipeline → WeChat / Zhihu paste with zero re-formatting. Drives `next/src/lib/export/wechat.ts`.
`mdnice/markdown-resume`	A4-formatted résumé inspiration → `resume-modern`.
`gcui-art/markdown-to-image`	iframe → high-DPI PNG export, replicated with `modern-screenshot` in `next/src/lib/export/image.ts`.
`op7418/guizang-ppt-skill`	Magazine-ink editorial deck integrated verbatim as `deck-guizang-editorial` and the Swiss variant `deck-swiss-international`. Original LICENSE + authorship preserved.
`tw93/kami`	Warm-parchment monochrome editorial document system → `doc-kami-parchment`.
`1weiho/open-slide`	1920×1080 agent-native canvas convention → `deck-open-slide-canvas`.
`heygen-com/hyperframes`	Frame-script schema for the entire `frame-` / `vfx-` / `mockup-` / `social-` family. Output hands straight off to Remotion to render `.mp4`.
`remotion-dev/remotion`	Target renderer for Hyperframes frame scripts.
`jimliu/baoyu-skills`	Practical skills collection — reference catalog for picker categorization.

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

Stay in the loop

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.

Contributors

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.

Star History

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

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.