Building the Worst HTMX Clone in Just 40 Lines of Code
Let's make the worst Htmx
I continue my series on building tiny clones of popular web frameworks by creating a minimal version of HTMX. Starting with basic event triggers and AJAX requests, I progressively add features like custom swap modes, advanced target resolution, and server-side event handling. The goal is to replicate the core functionality of HTMX in under 40 lines of JavaScript, demonstrating how backend developers can build dynamic apps without complex frontend tooling.
As long as your backend can send HTML templates you can go pretty far with it and build complete apps without a single line of JavaScript.
- Aeolos
I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs.
We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering.
First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, the browser doesn’t even flash - there’s no massive js bundle to parse, so it can start rendering instantly.
But the most staggering result is that in-document navigation over SSE achieves up to 5000:1 compression ratio for network requests within the Brotli compression window. Yes, 5000:1, you read that right. When changing server state we rerender the entire page, like an immediate-mode game engine, and push it to the client over an SSE “fat morph”, in about 100 bytes.
It’s so fast and so much more stable, our users are literally having fun. With a medical device.
And this ends up ~50% less code to maintain for a VASTLY superior UIX.
You are really missing out if you don’t learn how this works. It can give you a significant competitive edge if you care enough to try.
Edit: Big BIG thanks to bigskysoftware and the datastar team for making the web a sane place again. You really deserve all the props.
- wren6991
Huh, so every interactive event has a network request in the loop, with perceptible latency? And you still end up obligating client-side JS for the plumbing? I'd been meaning to look into HTMX but based on the content of this post it seems like a worst-of-all-worlds technical solution. Is it at least pleasant to work with?
- n4pw01f
Have a pretty large application running HTMX + WebComponents + Hono + Cloud Functions to serve up frontends, happy with it for about 2 years now
People throw salt at my stack but it’s fast, and straightforward to manage attack surface
- sparse-Matrix
Bravo! I never would have thought this would be so simple. As a direct consequence of this exercise: I now know something about what, precisely, htmx does.
cheers
- oaxacaoaxaca
>Or you can just use htmx?
great idea thank you for the recommendation