Mador: A Tiny Proxy-Based DOM Reactivity Library
Make any DOM reactive with just 80 lines of code
1What is Mador?
Mador is a minimal JavaScript library that adds reactivity to existing DOM elements without requiring components, templates, or virtual DOM. At just 855 bytes minified, it provides a lightweight alternative to larger frameworks. The core concept revolves around a reactive state tuple [r, w] where r handles DOM bindings and w manages state updates. Unlike traditional frameworks, Mador works directly with your current HTML structure.
2Core Features
The library offers three main functions: r() for reactive bindings, w() for state writes, and automatic dependency tracking. Bindings connect state to DOM elements through CSS selectors. Updates only occur when tracked dependencies change, optimizing performance. Write operations are batched, meaning multiple state changes in the same write callback are processed together efficiently. This approach eliminates the need for complex lifecycle management.
3Implementation Example
A basic counter implementation demonstrates Mador's simplicity. Developers import the ES module (either via npm or CDN), declare reactive state with initial values, then create bindings between state and DOM elements. Each binding specifies: 1) a CSS selector for target elements, 2) an update function that receives the element and state value, and 3) a read function that selects which state property to track. State changes automatically propagate to all bound elements.
4Technical Architecture
Mador leverages JavaScript's Proxy API to enable reactivity in just 80 lines of code. The library tracks which properties are accessed during binding executions, creating an efficient dependency graph. When state changes, Mador only reruns bindings that depend on the modified properties. This granular reactivity system prevents unnecessary DOM updates. The entire runtime fits in under 1KB, making it ideal for performance-critical applications.
5Comparison to Frameworks
Unlike React, Vue, or Svelte, Mador doesn't introduce components or compilation steps. It works with plain HTML and requires no build process. The library focuses solely on reactivity rather than providing a complete application framework. This philosophy makes Mador particularly suitable for: 1) enhancing traditional server-rendered pages, 2) progressively enhancing static sites, or 3) building extremely lightweight web apps where bundle size matters.
6Performance Benefits
Mador's minimal approach yields several performance advantages. The tiny footprint ensures fast loading, especially on mobile networks. Since it doesn't use virtual DOM, there's no diffing overhead. Automatic cleanup of unused bindings prevents memory leaks. Benchmarks show Mador can handle thousands of reactive elements with minimal overhead, making it competitive with optimized frameworks like Solid.js for certain use cases.
7Use Cases
The library excels in scenarios where you need: 1) simple state-driven UI updates without framework complexity, 2) to add interactivity to existing websites without rewriting markup, or 3) micro-interactions in otherwise static content. Common applications include: form validation, real-time data displays, interactive calculators, and stateful UI components. It's less suitable for complex single-page applications requiring routing or component composition.
8Adoption Considerations
While Mador offers impressive simplicity, teams should evaluate tradeoffs. The lack of component model may require more manual DOM management in large apps. There's no built-in solution for common needs like animation or form handling. However, for projects prioritizing minimalism and direct DOM control, Mador provides a compelling middle ground between vanilla JS and full frameworks. Its open-source MIT license encourages experimentation.