Hey everyone, I’ve been playing with web streams lately and ended up building <a href="https://github.com/skarab42/htms-js" target="_blank" rel="noopener nofollow">htms-js</a>, an experimental toolkit for streaming HTML in Node.js.
Instead of rendering the whole HTML at once, it processes it as a stream: tokenize → annotate → serialize. The idea is to keep the server response SEO and accessibility friendly from the start, since it already contains all the data (even async parts) in the initial stream, while still letting you enrich chunks dynamically as they flow.
There’s a small <a href="https://htms.skarab42.dev" target="_blank" rel="noopener nofollow">live demo</a> powered by a tiny zero-install server (<code>htms-server</code>), and more examples in the repo if you want to try it yourself.
It’s very early, so I’d love feedback: break it, test weird cases, suggest improvements… anything goes.
Repo: <a href="https://github.com/skarab42/htms-js" target="_blank" rel="noopener nofollow">https://github.com/skarab42/htms-js</a> 
Demo: <a href="https://htms.skarab42.dev" target="_blank" rel="noopener nofollow">https://htms.skarab42.dev</a>
<img src="https://media.daily.dev/image/upload/s--_4e3KMAl--/f_auto/v1757419369/ugc/content_5ec4cdb6-9dc7-4dbf-b1f7-70856b879f6d?_a=BAMClqZW0" alt="htms-dashboard-demo">
<hr>
<h2>Packages</h2>
This project contains multiple packages:
<ul>
<li><a href="https://github.com/skarab42/htms-js/tree/main/packages/htms-js" target="_blank" rel="noopener nofollow">htms-js</a> – Core library to tokenize, resolve, and stream HTML.</li>
<li><a href="https://github.com/skarab42/htms-js/tree/main/packages/fastify-htms" target="_blank" rel="noopener nofollow">fastify-htms</a> – Fastify plugin that wires <code>htms-js</code> into Fastify routes.</li>
<li><a href="https://github.com/skarab42/htms-js/tree/main/packages/htms-server" target="_blank" rel="noopener nofollow">htms-server</a> – CLI to quickly spin up a server and test streaming HTML.</li>
</ul>
<hr>
<h2>🚀 Quick start</h2>
<h3>1. Install</h3>
Use your preferred package manager to install the plugin:
<pre><code class="language-bash">pnpm add htms-js
</code></pre>
<h3>2. HTML with placeholders</h3>
<pre><code class="language-html">&lt;!-- home-page.html --&gt;
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;body&gt;
 &lt;h1&gt;News feed&lt;/h1&gt;
 &lt;div data-htms=&quot;loadNews&quot;&gt;Loading news…&lt;/div&gt;

 &lt;h1&gt;User profile&lt;/h1&gt;
 &lt;div data-htms=&quot;loadProfile&quot;&gt;Loading profile…&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3>3. Async tasks</h3>
<pre><code class="language-js">// home-page.js
export async function loadNews() {
 await new Promise((r) =&gt; setTimeout(r, 100));
 return `&lt;ul&gt;&lt;li&gt;Breaking story&lt;/li&gt;&lt;li&gt;Another headline&lt;/li&gt;&lt;/ul&gt;`;
}

export async function loadProfile() {
 await new Promise((r) =&gt; setTimeout(r, 200));
 return `&lt;div class=&quot;profile&quot;&gt;Hello, user!&lt;/div&gt;`;
}
</code></pre>
<h3>4. Stream it (Express)</h3>
<pre><code class="language-js">import { Writable } from &#x27;node:stream&#x27;;
import Express from &#x27;express&#x27;;
import { createHtmsFileModulePipeline } from &#x27;htms-js&#x27;;

const app = Express();

app.get(&#x27;/&#x27;, async (_req, res) =&gt; {
 res.setHeader(&#x27;Content-Type&#x27;, &#x27;text/html; charset=utf-8&#x27;);
 await createHtmsFileModulePipeline(&#x27;./home-page.html&#x27;).pipeTo(Writable.toWeb(res));
});

app.listen(3000);
</code></pre>
Visit <code>http://localhost:3000</code>: content renders immediately, then fills itself in.
<blockquote>
Note: By default, <code>createHtmsFileModulePipeline('./home-page.html')</code> resolves <code>./home-page.js</code>. To use a different file or your own <a href="https://github.com/skarab42/htms-js/tree/main/packages/htms-js#custom-resolvers" target="_blank" rel="noopener nofollow">resolver</a>, see <a href="https://github.com/skarab42/htms-js/tree/main/packages/htms-js#api" target="_blank" rel="noopener nofollow">API</a>.
</blockquote>
<hr>
<h2>Examples</h2>
<ul>
<li><a href="https://github.com/skarab42/htms-js/tree/main/examples/express/index.ts" target="_blank" rel="noopener nofollow">Express</a>, <a href="https://github.com/skarab42/htms-js/tree/main/examples/fastify/index.ts" target="_blank" rel="noopener nofollow">Fastify</a>, <a href="https://github.com/skarab42/htms-js/tree/main/examples/hono/index.ts" target="_blank" rel="noopener nofollow">Hono</a></li>
<li><a href="https://github.com/skarab42/htms-js/tree/main/examples/stdout/index.ts" target="_blank" rel="noopener nofollow">Raw streaming</a> (stdout)</li>
<li><a href="https://github.com/skarab42/htms-js/tree/main/examples/server" target="_blank" rel="noopener nofollow">htms server</a> (cli)</li>
</ul>
<pre><code class="language-bash">git clone https://github.com/skarab42/htms-js.git
cd htms-js
pnpm i &amp;&amp; pnpm build

pnpm --filter (express|fastify|hono|stdout|server)-example start
</code></pre>
<hr>
<h2>How it works</h2>
<ol>
<li>Tokenizer: scans HTML for <code>data-htms</code>.</li>
<li>Resolver: maps names to async functions.</li>
<li>Serializer: streams HTML and emits chunks as tasks finish.</li>
<li>Client runtime: swaps placeholders and cleans up markers.</li>
</ol>
Result: SEO-friendly streaming HTML with minimal overhead.

Star

skarab42

htms-js is an experimental Node.js toolkit that streams HTML content asynchronously while maintaining SEO-friendliness. It processes HTML through tokenization, annotation, and serialization stages, allowing dynamic content enrichment without sacrificing initial server response completeness. The toolkit includes packages for core functionality, Fastify integration, and a CLI server, with examples for Express, Fastify, and Hono frameworks.

htms-js: Stream Async HTML, Stay SEO-Friendly

This is pretty rad! I need to deep dive to understand better how it works behind the scenes