Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
1–10 of 37 posts
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#2Hey HN! I wanted to see how far you can push modern JavaScript Proxies without all the heavy overhead of a traditional framework. The result is Mador: a tiny ~80-line reactive state tuple ([r, w]) that lets you make any DOM element reactive using a simple CSS selector, automated dependency tracking, and batched microtasks. No build steps required—just drop it in.
I built this over the weekend just to experiment with clean, zero-dependency reactivity. Would love to hear your thoughts or see where you'd run into limits with something like this!
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#3Clean launch, good luck!
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#4Clean launch, good luck!
Thanx a lot!
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#5Great work!
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#6Great work!
Thanks, I really appreciate it!
Hope others will feel the same. The frontend community needs and deserves simple tools:)
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#7Proposed variant optimised for human readaiblity...
```js import mador from "mador"; const [read, write] = mador({ count: 1 }); read(".counter", ctx => ctx.el.textContent = ctx.count); write(".increment", "click", ctx => ctx.count++); write(ctx => ctx.count = 0); ```
## Read
Dependencies are detected automatically when the read function is run during initiation.
```js read(".counter", ctx => ctx.el.textContent = `Count: ${ctx.count}`); ```
## Write
Immediate:
```js write(ctx => ctx.count++); ```
Event-triggered:
```js write(".increment", "click", ctx => ctx.count++); ```
Event writes expose `ctx.el` and `ctx.event`.
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#8Are reactive updates based on deep equality or reference equality?
Re: Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
#9The core idiom I've used for years is deliberately tiny: fully encapsulated custom Web Components that simply re-render when matching an attribute and `window.state` changes. Data model is simply:
window.state = new Proxy({}, {
set(target, key, value) {
target[key] = value
document.querySelectorAll(`[data="${key}"]`)
.forEach(el => el.render?.())
return true
}
})