Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple

summary

Mador is a tiny, reactive DOM runtime designed for developers who want to add dynamic state management to existing HTML without the overhead of a full framework. It eliminates the need for virtual DOMs, components, or complex templates by binding state directly to DOM elements. This approach allows for minimal bundle size and a simpler development workflow. The library focuses on providing basic read and write operations to synchronize state with the UI.

key points

1. The library uses a read function that links specific DOM elements to state properties, ensuring updates only occur when the dependent data changes. This targeted approach avoids the expensive process of re-rendering large portions of the page.
2. State modifications are handled through a batched write function, which groups multiple changes together to optimize performance. This prevents the UI from flickering or updating too many times during a single state transition.
3. Mador minimizes architectural complexity by removing component lifecycles and build steps, fitting into a tiny footprint of approximately 855 bytes. It operates as a native ES module, making it easy to integrate via CDN or npm.

who should read it

Web developers who need a small amount of reactivity on existing pages and want to avoid the additive weight of heavy frameworks. It is ideal for those prioritizing performance and simplicity over complex application architecture.

discussion positive