Skip to content

The escape hatch

A swiper, wired to wd.subscribe

Darkmown owns the reactive slide state, the indicator dots, and the live readout — declaratively, with no hand-written JavaScript. The things a framework this small deliberately doesn't ship — arrow-key navigation, pointer drag / swipe, and the sliding transition — live in a colocated index.js that talks to the very same state through window.wd.subscribe and window.wd.set.

Warm ember-to-charcoal gradient
EmberWarm dusk · #b8462e
Teal-to-ink gradient
PulseSignal teal · #18b89a
Violet-to-midnight gradient
ForgeElectric violet · #6d5ae6
Amber-to-umber gradient
CompassTrail amber · #e0894a
Gold-to-olive gradient
LedgerLedger gold · #c79a3a

Slide 1 of 5 — drag it, press ← / →, or tap a dot.

View source — declarative core + a colocated behavior 
:state slide = 0
:computed human = slide + 1

# the dots are declarative — Darkmown reconciles `.active` for you
::: dot .active when slide == 0
:button "1" -> slide = 0
:::

# … the readout, too
Slide { human } of 5

// index.js, colocated next to the page. Loads after the runtime, so window.wd
// is ready. Drag / keyboard / transition — the gestural layer the framework
// deliberately leaves to you — all driven through the same `slide` state.
window.wd.subscribe("slide", (i) => {
  track.style.transform = `translateX(${-i * 100}%)`;
});
prevButton.onclick = () => window.wd.set("slide", current - 1);

The framework reconciles state, classes, and text; the escape hatch owns the gestures. They meet at one shared slide value.