How I ended up with a 2.9 kB GZip reactive UI engine that runs from a static file
A few weeks ago, I was working on a side project. Nothing fancy — just a small dashboard with a form, a list, and a few buttons. The kind of thing that should take an afternoon. But I caught myself opening npm install react react-dom react-router-dom. Then Vite. Then TypeScript config. Then a state management library. Then a build pipeline. For a form. I closed the terminal. Something felt wrong.…
A software engineer developed a lightweight reactive UI engine, weighing just 2.9 kB when compressed, that runs from a static file. The project emerged from a desire to avoid the complexity of frameworks while creating a small dashboard with a form, list, and buttons. The engineer opted for vanilla JavaScript and focused on three core APIs: DOMParser for parsing HTML into a DOM tree, Proxy for intercepting property changes, and Child index paths for direct node updates.
After two weeks of refinement, the resulting HyperText Mutation & Projection (HTMP) engine required no build steps, dependency installations, or template compilers. It operates by registering dynamic elements in HTML patterns and mapping state changes directly to the corresponding DOM nodes, eliminating the need for virtual DOM diffing or re-renders.
The HTMP engine is accessible via a single import from a CDN and can be tested by creating an HTML file with the provided code snippet.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
