AK Render · showcase

Pages your agents ship without writing HTML

Describe the page in YAML. The compiler emits one offline, deterministic, CSP-locked file, and every image and clip on this page came out of it.

The dashboard fixture compiled by AK Render, with stat tiles, a bar chart, and a donut chart

Deterministic bytes
Opens from file://
Nonce-locked styles and script
No inline handlers
Six built-in themes
Light and dark
Reduced-motion aware
Keyboard first

Explain

Turn a walkthrough into a page people finish

Tabs, steps, diagrams, and code read as one narrative. The outline follows the reader, and every code sample copies in one click.

Structured diagrams render without a diagram engine
Section outline with scroll-spy on wide screens
Copy buttons with visible confirmation

The explain fixture in the editorial theme, showing the hero title and the compile pipeline tabs

Everything in one spec

Chart
Charts that read at a glance
Gradient bars, value labels on hover, and a data table behind every chart.
6
Built-in themes
Blueprint, editorial, paper-ink, swiss-clean, terminal-mono, and warm-signal.
0
Network requests on open
The policy denies the network unless a spec opts in.
Diff
Diffs with intent
Before and after, side by side, with the risk spelled out.
Plan
Plans that track themselves
Milestones, owners, and status on one timeline.
Diagram
Diagrams without an engine
Structured flows render as accessible markup, with or without an adapter.
Theme
Donuts in dark
Every chart stop follows the theme into dark mode.
Catalog
53
Block types in one catalog
Every block below the hero is declared data, from bento to CTA. Nothing here authors markup.

Measured, not claimed

Test cases
363
+21 this round (improving)
Declared it() and test() cases across the git history
Fixture pages
11
+1 (improving)
Pages in fixtures/pages at each milestone
explain.html size
121.6 kB
+51.4 kB (worsening)
The embedded display face costs bytes; still one file, no requests
Runtime dependencies
1
unchanged
yaml, for reading specs

From spec to artifact

~/project

# validate the spec, then compile it
ak-render validate explain.yaml
ok: explain.yaml
  blocks: 8 (nodes: 9)
ak-render explain.yaml --out explain.html
wrote 124500 bytes to explain.html (4 runtime features, hash 0w5t9z60ka9un7)
ak-render themes
blueprint  editorial  paper-ink  swiss-clean  terminal-mono  warm-signal

What this round touched

4 added
4 modified

assets/fonts/geist/
- OFL.txtadded
scripts/
- capture-demo-media.mjsmodifiedelement crops at 2x
src/
- render/
  - embedded-fonts.generated.tsadded
  - font-faces.tsaddedinlines the bundled faces
  - showcase-blocks.tsmodifiedcta and hero frame
  - surface-styles.tsaddedthe night band
- theme/
  - load-theme.tsmodified
  - presets.tsmodified

The explain fixture in light mode — Drag the divider, or focus it and use the arrow keys. Both images are screenshots of the same compiled file.

A screen recording of the compiled gallery: tabs, the theme toggle, and chart hovers.

Dark mode

Every theme ships a dark scheme

The toggle remembers the reader's choice, and every token, chart stop, and diagram edge follows it.

Follows the system setting until the reader chooses
Charts and diagrams recolor from tokens

Release gates for this page

4 of 5 done

Unit tests, lint, typecheck, and build pass (done)
Theme snapshots and the gallery regenerate byte-identical (done)
Browser tests pass, including the before/after slider (done)
No horizontal overflow at 375 and 1440 pixels (done)
Visual regression baselines for the showcase blocks (open)

Ship the next artifact

Write the spec. Ship the page.

Install the compiler, point it at a YAML file, and open the result straight from disk. No server, no build step, no requests.

Read the docs Browse the gallery