Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
Mador is a lightweight, 80-line JavaScript library that enables reactive state binding to existing DOM elements without the need for complex frameworks. It uses ES modules and Proxy objects to track state changes and update the UI efficiently.
Why it matters
This tool offers a minimalist alternative for developers who need reactivity in web projects without the overhead of heavy frameworks like React or Vue.
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 [ r , w ] = mador ( { count : 1 , } ) ; r ( ".counter" , ( el , count ) => { el . textContent = `Count: ${ count } ` ; } , ( state ) => state . count , ) ; r ( ".another-counter" , ( el , count ) => { el . textContent = count * 3 ; } , ( state ) => state . count , ) ; w ( ( state ) => { state . count ++ ; } ) ; And that's basically all.
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in