Canonical Examples
Every example here is a runnable Chirp app you can copy from. Each one isolates one part of the framework surface — return types, htmx fragments, Suspense, SSE, or the chirp-ui app shell — so you can see the idiomatic pattern in working code.
New to Chirp? Follow the learning path, then work the tiers below in order.
Learning path
| Tier | Example | Teaches |
|---|---|---|
| 1 — Basics | Contacts (standalone) | Routes, forms,Page / Fragment, OOB |
| 2 — App shell | Contacts shell | ChirpUI shell,_actions.py, boosted nav |
| 3 — Capstone | Lucky Cat | Signals, Suspense, SSE, OOB, secure stack |
Tier 3 live demo: luckycat-production.up.railway.app
Tier 1 — plain htmx CRUD with validation and OOB swaps
The baseline app for forms, inline edit, search, and fragment updates.
Tier 1 — every Chirp response type on one page
Learn when to useTemplate, Page, Fragment, OOB, Suspense, Stream, and EventStream.
Tier 1 — minimal Server-Sent Events
The smallest post-load update channel example.
Tier 1 — shell-first initial render with deferred blocks
Skeleton placeholders resolve into OOB swaps as async data finishes.
Tier 2 — CRUD with chirp-ui app shell and boosted nav
Full CRUD app with app shell, boosted navigation, and fragment swaps.
Tier 2 — drag-and-drop board with OOB and SSE
Real-time board with multi-fragment updates and SSE live sync.
Tier 3 capstone — simulated trading floor · live demo
Signals, Suspense, SSE, OOB, and auth on one app shell. Complete tiers 1–2 first.
Tier 3 — streaming AI Q&A with cited sources
Fragments, SSE, and free-threading — after you know the return-type model.