mador.js
live module
CSSScirpt.com Demo Page

mador.js — Reactive DOM playground

Download Back To CSSScript.Com

A small state, precise bindings, and direct updates to the HTML already on the page.

Vanilla JS ES module No build step
01 / Reactive state

One write. Every binding moves.

Change the value and watch derived DOM bindings update together.

3 current count
Ready
count × 2
6
count × 3
9
parity
odd
recent writes
1
02 / Nested state

Read a path. Update a profile.

Nested properties stay connected to the same small state object.

Commit nested values Waiting for a change.
MV
Mara Voss Interface editor
03 / Keyed DOM map

Collections can change without losing their place.

Add, reorder, complete, or remove items from a keyed DOM collection.

3 keyed items
    04 / DOM lifetime

    Remove a node. The binding lets go.

    Unmount the probe, write again, then mount a fresh binding.

    Reactive probe Mounted and listening
    Count 3
    05 / Batched writes

    The latest state change stays visible.

    Each interaction records one concise result after its update cycle.

    Activity trace

    1 recent writes