You’ve felt the dread. You open a fresh project, run npm install, and suddenly your hard drive is gasping for air under the weight of 40,000 dependency files. All you wanted to do was make a counter button update in real-time.
We’ve accepted this bloated reality as the cost of modern web development. We install massive frameworks, configure complex build tools, and write components in artificial syntaxes just to avoid touching the DOM directly.
We traded the simplicity of HTML for the complexity of a build step, just to avoid writing vanilla JavaScript.
But what if the reactive machinery we rely on could be compressed into 80 lines of code? That’s exactly what Mador does. It’s a tiny reactive state tuple—[r, w]—built on modern JavaScript Proxies. It doesn’t require a virtual DOM. It doesn’t require a compiler. It makes any DOM element reactive using a simple CSS selector.
Most developers will look at this and debate bundle sizes or Proxy overhead. They are missing the actual paradigm shift. By using CSS selectors as the binding target, Mador treats the DOM itself as the state graph.
Think about that. The selector string—not a component tree—becomes the reactive contract.
When the CSS selector becomes the reactive contract, the framework doesn’t just shrink—it disappears.
For anyone tired of relying on black-box frameworks, this is pure empowerment. You don’t need a heavyweight abstraction layer to bind state to UI. You just need the browser’s native query language and 80 lines of plain JavaScript. The question stops being “Which framework should I use?” and becomes “What fundamental primitives does reactivity actually need?”
But here is the catch. Mador is brilliant, but it is not a free lunch.
It claims to replace heavyweight framework machinery, but it leaves critical semantics like equality comparison and update scheduling entirely to the user. A traditional framework would handle this for you behind a wall of abstractions. Mador strips that wall down.
Tinyness isn’t a feature; it’s a transfer of responsibility. You aren’t removing the complexity, you’re just moving it into your own head.
If you don’t understand how to schedule renders or compare deep equality, you will build a slow, buggy app. But if you do understand them, you get an unparalleled level of control. You get an application with zero hidden costs, zero opaque lifecycle methods, and zero dependency bloat.
The next time you reach for a 200kb framework to build a reactive interface, ask yourself if you actually need it. The DOM is already there. The state is already there. Maybe all you need is 80 lines of code to let them talk to each other.
FAQ
Q: Does Mador handle deep equality checks or reference equality?
A: That's up to you. Mador provides automated dependency tracking via Proxies, but it leaves critical semantics like equality comparison and update scheduling entirely in your hands.
Q: What's the practical implication of using CSS selectors as the binding target?
A: You can build highly reactive interfaces without a 40MB node_modules folder. The CSS selector becomes your reactive contract, meaning the DOM itself acts as your state graph.
Q: Is Mador a viable replacement for React or Vue?
A: Only if you understand the underlying primitives. Frameworks aren't just tools for building apps; they are crutches for developers who don't want to manually manage update scheduling. Mador removes the crutch.