Real apps. Written in Markdown.
Each of these is a complete, working app — a storefront with a cart, a live status dashboard, an interactive pricing builder, a guided quiz. Open one, use it, then view its source. It's a Markdown file you can read top to bottom.
🛍️
Folio — boutique storefront
A multi-page shop where the cart persists across pages, reloads, and browser tabs, and navigation is instant. Live search, add-to-cart, checkout.
static → reactive :store keyed @loop :form
📈
Pulse — status dashboard
A service dashboard driven by :fetch — loading, error, and empty states, live refresh, sortable metrics, status badges. No hand-written JavaScript.
:fetch lifecycle :computed .class when sort / where
🧩
Forge — plan configurator
Build your plan: toggle features, adjust seats, watch the price recompute instantly, get smart upsell hints, then check out — the classic "this needs React" interaction.
:computed pricing :if logic toggles :form
🧭
Compass — product finder
A guided quiz that asks a few questions, scores your answers, and recommends a match — a branching state machine expressed entirely as :if steps.
:if state machine :computed scored flow
📒
Ledger — sortable expense table
A spreadsheet-grade data table: click a header to re-sort live, filter by merchant, watch running totals recompute, flip light/dark — formatted with | money and | date, totalled with sum().
format pipes aggregates reactive sort :theme
What it costs
Darkmown's whole pitch is weight. A static page ships zero framework JavaScript — not "a little," none. The runtime loads only when a page actually declares reactivity, and it's one shared file, CI-enforced under 8 KB gzipped.
- Static Darkmown page —
0 KBframework JS. Forever. - Reactive Darkmown page — one shared
~7.7 KBgzipped runtime, no per-component bundles. - A typical SPA — ships a framework runtime in the ~15–60 KB gzipped range before your app code, on every page (Alpine ~15 KB, Vue ~18 KB runtime, React 19 ~59 KB).
The two Darkmown numbers above are measured on every commit; the runtime budget fails CI if it crosses 8 KB. The comparison figures are representative min+gzip runtime sizes (June 2026) — the point isn't "smallest" (Preact is smaller), it's nothing at all until you ask for it.
The directive demos
Prefer to see each feature in isolation? These pages tour the building blocks the apps are made of:
Reactive — state, keyed loops, scoped sections.
Loops — sort, paging, @empty, nesting.
Store — durable, cross-tab global state.
Theme — zero-JS OS dark mode from a skin.
Swiper — a draggable carousel via the escape hatch.
Media — :video, :audio, :embed, zero JS.
Data & Forms — fetch lifecycle, server round-trips.
Plain Markdown — a .md page, directives inert.