Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple

2026-09-06 | original

read original get JavaScript: The Definitive Guide (O'Reilly, Flanagan) → more articles

Why This Matters

Mador is a sub-1KB ES module that adds Proxy-based reactive state and DOM bindings to pages that already have HTML and JavaScript, with no components, templates, or virtual DOM. It reflects a continuing pull toward lightweight, framework-free approaches for developers who need a bit of reactivity without adopting a full build-and-component stack.

Key Takeaways

Mador returns a read/write tuple: bindings pair a CSS selector with an update function and a state selector, and only rerun when tracked properties change.
The runtime is roughly 855 bytes minified and ships as a native ES module usable via npm or CDN, with no global runtime required.
Bindings are tied to the DOM elements they update and are cleaned up when those elements disappear, eliminating component lifecycle management.

Worth a Look

JavaScript: The Definitive Guide (O'Reilly, Flanagan) — If minimalist tools like Mador appeal to you, this O'Reilly classic is the perfect companion — it digs into the language primitives such as Proxy, getters, and ES modules that make tiny reactive runtimes possible. It's a solid desk reference for writing framework-free JavaScript that still feels modern.

See JavaScript: The Definitive Guide (O'Reilly, Flanagan) on Amazon → Affiliate link — we may earn a commission on purchases, at no extra cost to you. Product picked by AI based on this article; it is not a tested recommendation.

Make DOM Reactive. Nothing more.

Mador:

is a very small reactive DOM runtime.

is for people who don't need or want a framework.

It gives you reactive state and a way to bind that state to existing DOM.

Mador is a native ES module and can be used through npm or directly from a CDN.

import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js" ; const [ read , write ] = mador ( { count : 1 , } ) ; read ( ".counter" , ( el , count ) => { el . textContent = `Count: ${ count } ` ; } , ( state ) => state . count , ) ; read ( ".another-counter" , ( el , count ) => { el . textContent = count * 3 ; } , ( state ) => state . count , ) ; write ( ( state ) => { state . count ++ ; } ) ;

And that's basically all.

There are no components, templates or virtual DOM. Mador works with the DOM you already have.

Reactive bindings

... continue reading

Explore topics: mador dom proxy es module reactive state