HeadlinesBriefing favicon HeadlinesBriefing.com

Mador:Tiny 80-line reactive DOM state library

Hacker News •
×

Mador is a minimal reactive DOM runtime designed for developers who want reactivity without the overhead of a full framework. At just 855 bytes minified, it provides core reactive state management and DOM binding capabilities. The library allows users to define reactive state using a simple tuple API, enabling read and write operations directly on existing DOM elements.

Mador tracks property dependencies, automatically re-running bindings only when the specific state properties used in the update function change. The write function batches multiple state changes for efficient processing. A key feature is automatic DOM lifetime management, where reactive runners are cleaned up when matching elements are removed from the DOM, eliminating the need for manual component lifecycle handling.

The library is distributed as a native ES module, usable via npm or directly from a CDN, and requires no global runtime or build step. It is licensed under MIT, making it a lightweight solution for pages that need simple reactivity alongside existing HTML and JavaScript.