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 project and explain it end to end. Each has a public repository you can clone, and all but one have 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

The external example repositories pin zfb 3.1.0 (checked on 2026-10-03) and use zudo-react; their styling uses zudo-wind utilities where configured and authored CSS throughout.

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

Ten standalone repositories, each a complete zfb project. Nine are deployed and running on Cloudflare; Agent Conversations has no deployment and runs locally. 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 ten side by side as a comparison matrix.

• Agent Conversations — a static shell with one zudo-react island over a framework-neutral conversation controller: queued runs, cancellation, and reviewed host changes, backed by a memory-only service or a local HTTP and SQLite server. The provider is synthetic and nothing is deployed.

• AI Summarizer — one zudo-react 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 zudo-react theme-toggle island, and an authored CSS design system. zudo-wind supplies only its owned-v1 reset. No SSR, no adapter.

• Corporate Website — a static zudo-react marketing site styled entirely with CSS Modules. It sets wind: false, so zudo-wind is disabled and the site uses only authored CSS.

• 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().