Recipes

Self-contained patterns and worked example sites for zfb. Curated section — one topic per page.

A maintainer-curated section holding two kinds of page:

• Focused recipes compose zfb's primitives — addVirtualModule, postBuild plugins, ctx.routes, non-HTML pages, MDX components — into one concrete solution you can adapt.

• Worked example sites take a whole deployable project and explain it end to end. Each has a public repository you can clone and a live deployment you can open.

Either way, a page here is:

• A single article on a single topic

• Written as an explanation, not a code dump — the why matters as much as the how

• Anchored to a specific zfb version range, so you know what state of the engine it assumes

Recipes

• Enlargeable Images — reproduce the old imageEnlarge built-in in userland using the img component override. Covers the server-side (no JS) and islands variants, plus the no-enlarge opt-out.

• Admonitions — register :::note, :::tip, :::info, :::warning, :::danger, :::caution, and :::details using the directives feature with minimal component stubs and CSS hooks.

Example sites

Nine standalone repositories, each a complete zfb project deployed and running on Cloudflare. Every page below covers one of them — what it demonstrates, the exact stack it uses, how it works, and how to run it locally — and links to the repository so you can clone it. Examples puts the same nine side by side as a comparison matrix.

• AI Summarizer — one Preact island posting to a prerender = false route backed by a Workers AI binding, with a deterministic fallback so the endpoint still answers with no Cloudflare account.

• Blog — a pure-SSG Markdown and MDX blog: three dynamic-route shapes, paginate(), one theme-toggle island, and a Tailwind v4 token system. No SSR, no adapter.

• Corporate Website — a static Preact marketing site styled entirely with CSS Modules. The one example that sets tailwind: { enabled: false }, so the emitted stylesheet is its authored CSS and nothing else.

• JSON API — the smallest complete SSR starter: two prerender = false GET endpoints, one of which builds a MiniSearch index lazily and reuses it across warm-isolate requests. Nothing to provision.

• KV Guestbook — a write path through a Cloudflare binding. One route both renders the entry list and handles a no-JavaScript form post against Workers KV, alongside a token-guarded admin delete.

• Password Gate — a static site fronted by a hand-written Worker with run_worker_first = true, the one example that talks to Cloudflare without the zfb adapter. Its live demo answers 401 by design.

• Reverse Proxy — a catch-all prerender = false route forwarding method, path, query, and body to a fixed upstream, with a deliberate header policy in both directions.

• Webshop — a fully SSR shop on Cloudflare D1 with accounts, a cart, and checkout. Every route is prerender = false and every button is a form, so the build emits no HTML and no client JavaScript.

• Workers Cache — caching expressed purely as HTTP: per-route Cache-Control, Cache-Tag, and Vary, plus a token-protected purge route calling ctx.cache.purge().