{
  "id": 7242361,
  "title": "How I ended up with a 2.9 kB GZip reactive UI engine that runs from a static file",
  "url": "https://urgent.news/2026/09/14/how-i-ended-up-with-a-2-9-kb-gzip-reactive-ui-engine-that-runs-from-a",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-14T04:17:55.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/erlanggasatriasource/how-i-ended-up-with-a-29-kb-gzip-reactive-ui-engine-that-runs-from-a-static-file-1l3e"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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.…",
  "key_points": [
    "Engineer creates 2.9 kB GZip reactive UI engine",
    "Uses vanilla JavaScript with DOMParser, Proxy, and Child index paths",
    "Operates by registering dynamic elements and mapping state changes"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}