{"id":5193,"date":"2026-09-14T01:30:22","date_gmt":"2026-09-14T04:30:22","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/09\/14\/how-i-ended-up-with-a-2-9-kb-gzip-reactive-ui-engine-that-runs-from-a-static-file\/"},"modified":"2026-09-14T01:30:22","modified_gmt":"2026-09-14T04:30:22","slug":"how-i-ended-up-with-a-2-9-kb-gzip-reactive-ui-engine-that-runs-from-a-static-file","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/09\/14\/how-i-ended-up-with-a-2-9-kb-gzip-reactive-ui-engine-that-runs-from-a-static-file\/","title":{"rendered":"How I ended up with a 2.9 kB GZip reactive UI engine that runs from a static file"},"content":{"rendered":"
\n
<\/div>\n

It works. And some friends of mine, still using JQuery instead.<\/p>\n

<\/a> The Experiment <\/h2>\n

I started asking a simple question:<\/p>\n

What if I could parse HTML once, register every dynamic part, and then update only the pieces that change?<\/p>\n

No virtual DOM. No diffing. No compiler. Just the browser’s own tools.<\/p>\n

<\/a> Three APIs came to mind: <\/h3>\n
    \n
  1. DOMParser<\/strong> \u2014 the browser can already parse HTML into a DOM tree. I don’t need a template compiler like htm<\/em>.<\/li>\n
  2. Proxy<\/strong> \u2014 JavaScript’s native reactive primitive. Every property change can be intercepted.<\/li>\n
  3. Child index paths<\/strong> \u2014 if I know the path to a node ([5, 0, 0]), I can update it directly.<\/li>\n<\/ol>\n

    So I wrote a prototype. It was rough \u2014 about 200 lines. But it worked:<\/p>\n

    \n
    HTML string \u2192 parsed into a DOM tree. Every {{ }}, :for, @click, :class \u2192 registered with a path. State changes \u2192 only the affected bindings update. <\/code><\/pre>\n
    \n<\/p><\/div>\n<\/p><\/div>\n
    No diffing. No re-render. Just surgical DOM updates.<\/p>\n
    I called it HTMP<\/strong>\u2014 HyperText Mutation & Projection<\/em>.<\/p>\n
      <\/a> What I Ended Up With <\/h3>\n
    Two weeks later, after some iteration, I had this: <\/p>\n
    \n
    import<\/span> {<\/span> HTMP<\/span> }<\/span> from<\/span> '<\/span>https:\/\/unpkg.com\/htm-projection@latest\/dist\/esm\/index.js<\/span>'<\/span>;<\/span> const<\/span> pattern<\/span> =<\/span> ` <div> <h1>{{ title }}<\/h1> <input type=\"text\" @input=\"changeTitle(e)\" placeholder=\"Type title...\" \/> <p>Count: {{ count }}<\/p> <button @click=\"increment()\">Increment<\/button> <ul> <li :for=\"todo in todos\"> <span :class=\"todo.done ? 'done' : ''\">{{ todo.text }}<\/span> <button @click=\"finishTodo(todo)\">Finish<\/button> <button @click=\"deleteTodo(todo)\">Delete<\/button> <\/li> <\/ul> <\/div> `<\/span>;<\/span> const<\/span> app<\/span> =<\/span> new<\/span> HTMP<\/span>(<\/span>'<\/span>app<\/span>'<\/span>,<\/span> pattern<\/span>);<\/span> app<\/span>.<\/span>setProxy<\/span>({<\/span> title<\/span>:<\/span> ''<\/span>,<\/span> count<\/span>:<\/span> 0<\/span>,<\/span> todos<\/span>:<\/span> []<\/span> });<\/span> app<\/span>.<\/span>setProgram<\/span>({<\/span> changeTitle<\/span>:<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>title<\/span> =<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>;<\/span> },<\/span> increment<\/span>:<\/span> ()<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>count<\/span>++<\/span>;<\/span> },<\/span> finishTodo<\/span>:<\/span> (<\/span>todo<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span> =<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>t<\/span> =><\/span> t<\/span>.<\/span>id<\/span> ===<\/span> todo<\/span>.<\/span>id<\/span> ?<\/span> {<\/span> ...<\/span>t<\/span>,<\/span> done<\/span>:<\/span> !<\/span>t<\/span>.<\/span>done<\/span> }<\/span> :<\/span> t<\/span> );<\/span> },<\/span> deleteTodo<\/span>:<\/span> (<\/span>todo<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span> =<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span>.<\/span>filter<\/span>(<\/span>t<\/span> =><\/span> t<\/span>.<\/span>id<\/span> !==<\/span> todo<\/span>.<\/span>id<\/span>);<\/span> }<\/span> });<\/span> app<\/span>.<\/span>mount<\/span>();<\/span> <\/code><\/pre>\n
    \n<\/p><\/div>\n<\/p><\/div>\n
    That’s it. No JSX. No hooks. No build step. No npm install.<\/p>\n
    It weighed 2.9 kB gzipped.<\/p>\n
      <\/a> Try It Right Now (30 Seconds) <\/h2>\n
    I want you to try this. Not because I’m selling anything<\/strong> \u2014 just because I want to see if it works for someone else<\/strong>.<\/p>\n
    Step 1<\/strong>: Create a file called test.html on your desktop.<\/p>\n
    Step 2<\/strong>: Paste this into it: <\/p>\n
    \n
     <!DOCTYPE html><\/span> <html><\/span> <head><\/span> <style><\/span> body<\/span> {<\/span> font-family<\/span>:<\/span> sans-serif<\/span>;<\/span> padding<\/span>:<\/span> 20px<\/span>;<\/span> }<\/span> .done<\/span> {<\/span> text-decoration<\/span>:<\/span> line-through<\/span>;<\/span> color<\/span>:<\/span> gray<\/span>;<\/span> }<\/span> button<\/span> {<\/span> cursor<\/span>:<\/span> pointer<\/span>;<\/span> margin<\/span>:<\/span> 2px<\/span>;<\/span> }<\/span> <\/style><\/span> <\/head><\/span> <body><\/span> <button<\/span> onclick=<\/span>\"app.unmount()\"<\/span>><\/span>Unmount<\/button><\/span> <button<\/span> onclick=<\/span>\"app.remount()\"<\/span>><\/span>Remount<\/button><\/span> <div<\/span> id=<\/span>\"app\"<\/span>><\/div><\/span> <script <\/span>type=<\/span>\"module\"<\/span>><\/span> import<\/span> {<\/span> HTMP<\/span> }<\/span> from<\/span> '<\/span>https:\/\/unpkg.com\/htm-projection@latest\/dist\/esm\/index.js<\/span>'<\/span>;<\/span> const<\/span> pattern<\/span> =<\/span> ` <div> <h1>{{ title }}<\/h1> <input type=\"text\" @input=\"changeTitle(e)\" placeholder=\"Type title...\" \/> <p>Count: {{ count }}<\/p> <button @click=\"increment()\">Increment<\/button> <hr> <p><i>{{ todos.length === 0 ? 'No todos yet.' : '' }}<\/i><\/p> <input type=\"text\" @input=\"changeInput(e)\" :value=\"inputTodo\" placeholder=\"New task...\" \/> <button @click=\"addTodo()\">Add Todo<\/button> <ul> <li :for=\"todo in todos\"> <span :class=\"todo.done ? 'done' : ''\">{{ todo.text }}<\/span> <button @click=\"finishTodo(todo)\">{{ todo.done ? 'Undo' : 'Finish' }}<\/button> <button @click=\"deleteTodo(todo)\">Delete<\/button> <\/li> <\/ul> <\/div> `<\/span>;<\/span> const<\/span> app<\/span> =<\/span> new<\/span> HTMP<\/span>(<\/span>'<\/span>app<\/span>'<\/span>,<\/span> pattern<\/span>);<\/span> app<\/span>.<\/span>setProxy<\/span>({<\/span> title<\/span>:<\/span> ''<\/span>,<\/span> count<\/span>:<\/span> 0<\/span>,<\/span> inputTodo<\/span>:<\/span> ''<\/span>,<\/span> todos<\/span>:<\/span> []<\/span> });<\/span> app<\/span>.<\/span>setProgram<\/span>({<\/span> changeTitle<\/span>:<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>title<\/span> =<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>;<\/span> },<\/span> increment<\/span>:<\/span> ()<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>count<\/span>++<\/span>;<\/span> },<\/span> changeInput<\/span>:<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>inputTodo<\/span> =<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>;<\/span> },<\/span> addTodo<\/span>:<\/span> ()<\/span> =><\/span> {<\/span> if <\/span>(<\/span>!<\/span>app<\/span>.<\/span>proxy<\/span>.<\/span>inputTodo<\/span>.<\/span>trim<\/span>())<\/span> return<\/span>;<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span> =<\/span> [...<\/span>app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span>,<\/span> {<\/span> id<\/span>:<\/span> Date<\/span>.<\/span>now<\/span>(),<\/span> text<\/span>:<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>inputTodo<\/span>,<\/span> done<\/span>:<\/span> false<\/span> }];<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>inputTodo<\/span> =<\/span> ''<\/span>;<\/span> },<\/span> finishTodo<\/span>:<\/span> (<\/span>todo<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span> =<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>t<\/span> =><\/span> t<\/span>.<\/span>id<\/span> ===<\/span> todo<\/span>.<\/span>id<\/span> ?<\/span> {<\/span> ...<\/span>t<\/span>,<\/span> done<\/span>:<\/span> !<\/span>t<\/span>.<\/span>done<\/span> }<\/span> :<\/span> t<\/span>);<\/span> },<\/span> deleteTodo<\/span>:<\/span> (<\/span>todo<\/span>)<\/span> =><\/span> {<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span> =<\/span> app<\/span>.<\/span>proxy<\/span>.<\/span>todos<\/span>.<\/span>filter<\/span>(<\/span>t<\/span> =><\/span> t<\/span>.<\/span>id<\/span> !==<\/span> todo<\/span>.<\/span>id<\/span>);<\/span> }<\/span> });<\/span> app<\/span>.<\/span>mount<\/span>();<\/span> window<\/span>.<\/span>app<\/span> =<\/span> app<\/span>;<\/span> <\/script><\/span> <\/body><\/span> <\/html><\/span> <\/code><\/pre>\n
    \n<\/p><\/div>\n<\/p><\/div>\n
    Step 3<\/strong>: Save it. Double-click the file, now its run in your browser.<\/p>\n
    Step 4<\/strong>: Type a title. Increment the counter. Add a todo. Finish it. Delete it.<\/p>\n
    Step 5<\/strong>: Click “Unmount” \u2014 the app disappears. Click “Remount” \u2014 it comes back with state intact.<\/p>\n
    No server. No npm. No build. Just a static HTML file running a reactive app.<\/p>\n
    If it works, you’ll understand in 30 seconds why I got excited.<\/p>\n
    If it doesn’t work, tell me \u2014 I want to know.<\/p>\n
      <\/a> What I Learned Along the Way <\/h3>\n
    This experiment taught me a few things:<\/p>\n
      \n
    1. \n
      The browser already has everything.
       DOMParser parses HTML. Proxy handles reactivity. addEventListener handles events. I didn’t need to invent anything \u2014 just connect what was already there.<\/p>\n<\/li>\n
    2. \n
      Less code means fewer bugs.
       The entire engine is a few hundred lines. No virtual DOM, no diffing algorithm, no compiler. Less surface area for bugs.<\/p>\n<\/li>\n
    3. \n
      Constraint drives creativity.
       I forced myself to use only browser APIs. No dependencies. That constraint led to a design that’s smaller than HTMX (which is server-rendered) and smaller than snabbdom (which is a VDOM library).<\/p>\n<\/li>\n
    4. \n
      It just works \u2014 even for AI agents.
       I asked a coding agent with zero knowledge of HTMP to learn README.md and API.md, then build an SPA with routing implements only what browser already have: history API. It did \u2014 no hallucination, no debugging. Because the pattern is HTML, and agents already know HTML.<\/p>\n<\/li>\n<\/ol>\n
      What This Isn’t<\/p>\n
      I want to be honest. HTMP isn’t for everything.<\/p>\n
      \n
      Not a React replacement for large applications with complex state. But I tried it. Not a Vue replacement for teams already invested in the ecosystem. Not a HTMX replacement for server-rendered content sites. <\/code><\/pre>\n
      \n<\/p><\/div>\n<\/p><\/div>\n
      It’s for the in-between:<\/p>\n
      \n
      A form that needs reactivity usually use JQuery and some library like notification library, but doesn't need React. A widget embedded in a PHP or WordPress page. A small SPA that needs routing but not a framework. A legacy project where npm install isn't an option. <\/code><\/pre>\n
      \n<\/p><\/div>\n<\/p><\/div>\n
        <\/a> Where It Stands <\/h3>\n
      HTMP is at v1.0.1. as this article wrote. It has:<\/p>\n
      \n
      4 live examples (basic, form, SPA, note-guard) Smoke tests Zero dependencies 2.9 kB gzipped Verified by BundlePhobia Works in any browser <\/code><\/pre>\n
      \n<\/p><\/div>\n<\/p><\/div>\n
      I don’t know if anyone else will find it useful. But I built it for myself, and it solved my problem. If it solves yours too \u2014 great.<\/p>\n
      If you tried the test.html and it worked, I’d love to hear what you think.<\/p>\n
        <\/a> Links <\/h3>\n
      GitHub: github.com\/erlanggasatria-source\/HTMP<\/a><\/p>\n
      npm: npmjs.com\/package\/htm-projection<\/a><\/p>\n
      I’m not a framework author. I’m just a developer who got tired of VDOM and decided to try something simpler. If you’re curious \u2014 copy the code, save it as test.html, and open it. That’s the whole point.<\/em><\/p>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n
      Fuente: Art\u00edculo original<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      It works. And some friends of mine, still using JQuery instead. The Experiment I started asking a simple question: What if I could parse HTML once, register every dynamic part, and then update only the pieces that change? No virtual DOM. No diffing. No compiler. Just the browser’s own tools. Three APIs came to mind: […]<\/p>\n","protected":false},"author":1,"featured_media":5192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"webixso_pending_account_ids":""},"categories":[41],"tags":[],"class_list":["post-5193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devto"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/5193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/comments?post=5193"}],"version-history":[{"count":0,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/5193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media\/5192"}],"wp:attachment":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media?parent=5193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/categories?post=5193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/tags?post=5193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}