Mador, an 80-line JavaScript library, enables reactive DOM updates without a framework

Introduction to Mador

Mador is a new, minimal JavaScript library designed to introduce reactivity into existing DOM structures. It functions as a reactive DOM runtime, providing state management and binding capabilities without the overhead of a full-fledged JavaScript framework. The library is particularly aimed at developers who need to add reactive features to web pages that already have HTML and JavaScript, but do not require a complex framework.

Core Functionality

Mador operates by allowing developers to define reactive state and then bind specific DOM elements to that state. A binding consists of a selector to identify elements, an update function to modify the element's content, and a read function to select the state dependency. Mador tracks properties read by the binding and only reruns updates when those specific dependencies change. State modifications are handled through a write function, with changes batched for efficiency.

Lightweight Design

A key characteristic of Mador is its small footprint and simplicity. The runtime is approximately 855 bytes when minified, and the core logic is contained within about 80 lines of code. It avoids concepts like components, templates, or a virtual DOM, working directly with the existing DOM. This design choice eliminates the need for a build step and allows for direct use as a native ES module, either via npm or a CDN.

Dependency Management

Mador automatically manages dependencies for reactive updates. When a binding is established, it monitors the state properties accessed by its read function. Updates to the DOM are triggered only when these specific dependent state properties change. Additionally, bindings are associated with the DOM elements they update, allowing Mador to automatically remove corresponding reactive runners if the matching elements are no longer present in the document.