Live demos.

Every demo

All 111 programs, grouped by folder — open a section to mount its previews. The per‑section counts are read from demos/manifest.json, so this list is whatever is on disk. Everything below the gallery explains how the demos are built and how to run them yourself.

What these demos are

One demo is one file. There is no build step, no JavaScript glue and no per‑demo HTML page: docs/demos/<folder>/<name>.aktion is the whole program, and a single runner shell renders whichever one its ?app= parameter names.

That is what makes them useful as examples. Nothing in a demo is a documentation‑only shortcut, so the text you read here is the text that runs — paste it into the playground or drop the file into your own src/ and it behaves the same.

$app(Column([
  PageHeader("Invoices", { subtitle: "Everything billed this quarter" }),
  Card([
    Table([
      Col("Invoice", ["INV-001", "INV-002"]),
      Col("Amount", ["$1,200", "$840"])
    ])
  ])
], { gap: "lg" }))

Programs read like that the whole way down: one $app(…) call composing components, with the data and helpers it references declared around it. The median demo is 91 lines — the smallest is 41, the largest 457.

Start here

Four programs cover most of what you will want to see first. Each link opens the full‑page runner in a new tab, so the gallery stays where it is.

Arrived from a guide and want the demo that exercises the primitive you just read about? This is the index:

The four categories

The folder a demo lives in tells you how much of an app it is. That is the entire taxonomy: a program lives in exactly one folder, and the folder name is the section heading you see in the gallery.

mini-apps/ is listed first everywhere because scripts/build-docs.mjs sorts it there; the other folders follow alphabetically and files inside a folder are sorted by name. The counts above come from demos/manifest.json, which that script regenerates from disk on every docs build.

Reading a demo

The demos are meant to be read, not just run. Three things make that quick: the source layout is the same in every file, the runner hands you the program in an editor, and the URLs are guessable.

The source layout

Read the first line before anything else. Every program calls $app(…) near the top and declares everything that call references below it — declarations hoist, so the head of the file is the page shape and the rest is detail.

$app(Center([Container([Column([header, addRow, list], { gap: "md" })], { size: "sm" })], { minHeight: "85vh" }))

todos = $store({
  persist: "todo.items",
  history: 50,
  items: [{ id: "t1", title: "Read the Aktion docs", done: false }],
  add:    (s, title) => { s.items = [...s.items, { id: $util.uuid(), title, done: false }] },
  toggle: (s, id) => { s.items = s.items.map(t => t.id == id ? { ...t, done: !t.done } : t) }
})

$draft = ""

header = PageHeader("To-do List", { subtitle: `${todos.items.length} tasks` })

addRow = Row([
  StackItem(Input("draft", { placeholder: "What needs doing?", value: $draft }), { grow: 1 }),
  Button("Add", { variant: "primary", onClick: () => { todos.add($draft); $draft = "" } })
], { gap: "sm", align: "end" })

list = Card([Column(todos.items.map(t => Row([
  Checkbox(`done-${t.id}`, { value: t.done, onChange: () => todos.toggle(t.id) }),
  Text(t.title)
], { gap: "sm", align: "center", key: t.id })), { gap: "sm" })])

That is mini-apps/todo-list.aktion cut down to its skeleton: header, addRow and list are used on line 1 and defined further down. 110 of the 111 programs put $app(…) in their first eight lines; mini-apps/aktion-website.aktion is the one that calls it lower, at line 33.

Most files also open with a comment header saying what the program is and what it is a starting point for — 110 of 111 carry one, and 55 add a // Uses: line naming the primitives. Because the demos are plain text, grep is a perfectly good index:

# Which demos fetch over the network?
grep -l '$query(' docs/demos/*/*.aktion

# Which demos route between pages?
grep -l '$router(' docs/demos/*/*.aktion

Eight programs answer the first question and two the second; count the four $http demos as well and ten of the 57 mini‑apps talk to a network, which is the figure The four categories reports.

The runner shell

One page, demos/index.html, renders every demo. It adds a thin toolbar above the program and nothing else:

Errors are not swallowed. The runner listens for the element’s error event and prints parse and runtime messages in a red box above the program, so a demo you break while editing tells you where.

Deep‑linking a demo

Both URL shapes the gallery uses are ones you can write by hand — useful when a guide, an issue, or your own notes should point at one exact program:

demos/index.html?app=mini-apps/todo-list.aktion            // full page, with the toolbar
demos/index.html?app=blocks/login-card.aktion&embed=1      // chrome-less: the program only

A missing or unrecognised app falls back to mini-apps/aktion-website.aktion. embed only has to be present — any value hides the toolbar, which is exactly what the preview tiles load.

How the preview tiles work

The tiles under Every demo are not images. Each one mounts an iframe pointing at the embedded runner, which is why the gallery is careful about how many programs it boots at once.

• One section at a time. Folders are accordions: opening one collapses the others, and Mini Apps is open on arrival.
• Only what is near the viewport runs. An IntersectionObserver with a 150 px margin mounts a tile’s iframe as it approaches and removes it again once it scrolls away.
• Tiles are zoomed out, not cropped. The iframe renders at 400% of the tile and is scaled to 25%, so a whole page fits a 16:10 thumbnail.
• Hover to auto‑scroll. Point at a tile and its preview scrolls itself at about 55 content pixels per second, reverses at the bottom, and snaps back to the top when the pointer leaves.

Running them locally

The gallery itself is static, but the runner imports the runtime from dist/, so a fresh checkout has to be built once before any demo renders. Two routes work.

From a clone, with Vite

git clone https://github.com/asfand-dev/aktion.git
cd aktion
npm install
npm run dev     # = npm run build && vite — builds dist/, then serves the repo root

Open the URL Vite prints (http://localhost:5173 unless the port is taken) and append /docs/live-demos.html. Editing a .aktion file and reloading is enough: the runner fetches each program with a cache‑busting ?ts= query, so you never get a stale copy.

As the deployable site

npm run build:docs              # rescans docs/demos/, then assembles ./site/
npx http-server site -p 4321    # or: npx serve site

Then open http://localhost:4321/live-demos.html. Because build:docs regenerates docs/demos/manifest.json before it copies anything, a program you drop into one of the four folders shows up in the gallery without editing the manifest by hand.

Next