htms 💨 Stream Async HTML, Stay SEO-Friendly

Send HTML that renders instantly, then fills itself in as async tasks complete. One response. No hydration. No empty shells.

This monorepo hosts the JavaScript implementation of HTMS: a proposal to progressively render HTML with async functions while staying SEO-friendly and lightweight.

---

Packages

This workspace contains multiple packages:

• htms-js – Core library to tokenize, resolve, and stream HTML.
• htms-dom – Core browser library to swap and clean placeholders.
• fastify-htms – Fastify plugin that wires htms-js into Fastify routes.
• htms-server – CLI to quickly spin up a server and test streaming HTML.

Each package has its own README with installation and usage instructions.

🦀 Rustacean? Check out htms-rs.

---

Why try it

• Instant rendering: browsers show HTML immediately.
• Progressive async: placeholders stream in as soon as ready.
• Scoped modules: keep tasks organized by context, even with nested data-htms-module blocks.
• SEO intact: bots see full HTML.
• Tiny runtime: one Web Component, injected automatically.
• Tech-agnostic: works with Express, Fastify, Hono, workers, or even raw stdout.

---

How it works

1. Tokenizer: scans HTML for data-htms.
2. Resolver: maps names to async functions.
3. Serializer: streams HTML and emits chunks as tasks finish.
4. Client runtime: swaps placeholders and cleans up markers.

Result: SEO-friendly streaming HTML with minimal overhead.

Try the curl optimized demo

$ curl -N https://htms.skarab42.dev/curl

Try the (too much) dashboard demo

---

Status

This is experimental. APIs may change.

We'd love developers to:

• Experiment in different contexts.
• Find limits: performance, DX, compatibility.
• Challenge assumptions and suggest alternatives.
• See if it fits your framework or stack.

---

Development

Setup

git clone https://github.com/skarab42/htms-js.git
cd htms-js
pnpm i
pnpm build

Common dev commands

# format + lint + typecheck + build + test
pnpm check

# run tests
pnpm test
pnpm test:watch

# lint / format
pnpm lint:check
pnpm lint:fix
pnpm format:check
pnpm format:write

# code coverage
pnpm coverage

# build all packages
pnpm build

Run examples

# run from repo root, pick one:
pnpm --filter server-example start # published dashboard demo at https://htms.skarab42.dev
pnpm --filter hono-example start
pnpm --filter fastify-example start
pnpm --filter express-example start
pnpm --filter stdout-example start

Reset workspace

pnpm reset

Contribute

Help explore whether streaming HTML can be practical:

• ⭐ Star the repo
• 🐛 Report issues
• 💡 Propose ideas
• 🙏 Open PRs

The only way to know where this works or breaks is to try it together.

---

License

MIT