Starter demos

Have a look at how it all fits together.

Each demo is one technical building block of an app as a small, working example — routing, API handlers, server functions, rendering modes, state and dynamic params. They are the reference your coding agent reads to build features the way this project does.

Keep them while you build the first version. Delete the demo pages before you take your project live.

• Typed params

  Dynamic routes

  A guitar catalog with list and detail routes. Typed route params resolve a loader before the page paints.

  Open
• Multipart API

  File uploads

  Bytes stream to Flydrive while metadata lands in the database — one route handler covers both verbs.

  Open
• Server fn → queue

  Mail worker

  A typed server function enqueues a background job and returns immediately; a worker drains the queue.

  Open
• RPC

  Server functions

  A todo list that reads and writes through TanStack Start server functions against the database.

  Open
• Route handler

  API endpoint

  A client page that fetches JSON from a colocated TanStack API route.

  Open
• Rendering

  SSR modes

  The same list rendered three ways, one per value of the per-route ssr option.

  Open
• State

  Client store

  A TanStack Store example with per-field subscriptions and derived state.

  Open
• Build-time assets

  Responsive images

  Widths and formats generated at build time, with a low-quality placeholder until each loads.

  Open

Every one of these lives in src/app/routes/demo, with its data and helpers in src/app/lib/demo. Nothing outside those two folders depends on them, so deleting both is all it takes to clear the lot.