Runnable Examples

Clone and run in minutes

All examples live in the monorepo and run with a single pnpm command. No extra setup — just install and dev.

Before you run

git clone the repopnpm install (from root)pnpm build (builds the library)

TanStack Start

Full-stack SSR apps

Self-contained TanStack Start apps with server functions, SSE, and in-memory storage. No database required.

Basic Todos

TanStack Start (SSR)

:3100

✓defineTags() — type-safe tag tree
✓meta.tags on useQuery — the minimal API
✓invalidateTags() after mutations
✓SSE auto-refresh across all open tabs

# From the monorepo root
pnpm --filter @tanstack-tools/example-basic-todos dev
# Open http://localhost:3100

withTags() Helper

TanStack Start (SSR)

:3101

✓withTags() — zero-boilerplate tagging
✓Auto-derived queryKey from tag values
✓Side-by-side: auto vs explicit queryKey
✓Both queries refetch on the same invalidation

# From the monorepo root
pnpm --filter @tanstack-tools/example-with-tags-helper dev
# Open http://localhost:3101

SPA + Standalone Backend

One frontend, four backend choices

A single TanStack Router + Query SPA (no Start/SSR) proxies /api to whichever backend you choose. Swap backends freely — the SPA does not change.

SPA demonstrates

✓createHTTPInvalidatorClient() from /http-client

✓TagInvalidationProvider wired to an external backend

✓withTags() on queryOptions

✓Auto-refetch via SSE — no TanStack Start required

SPA dev server::5173Backend::3001

Express

Node.js · battle-tested · broad ecosystem

# Terminal 1 — Express backend
pnpm --filter @tanstack-tools/example-server-express dev

# Terminal 2 — SPA frontend
pnpm --filter @tanstack-tools/example-spa dev
# Open http://localhost:5173

Hono

Node.js / Bun / edge · ultra-fast · type-safe

# Terminal 1 — Hono backend
pnpm --filter @tanstack-tools/example-server-hono dev

# Terminal 2 — SPA frontend
pnpm --filter @tanstack-tools/example-spa dev
# Open http://localhost:5173

Fastify

Node.js · schema-first · high throughput

# Terminal 1 — Fastify backend
pnpm --filter @tanstack-tools/example-server-fastify dev

# Terminal 2 — SPA frontend
pnpm --filter @tanstack-tools/example-spa dev
# Open http://localhost:5173

Elysia

Bun runtime required · end-to-end type safety

# Terminal 1 — Elysia backend (requires Bun)
pnpm --filter @tanstack-tools/example-server-elysia dev

# Terminal 2 — SPA frontend
pnpm --filter @tanstack-tools/example-spa dev
# Open http://localhost:5173

How the proxy works: The SPA's Vite dev server forwards all /api/* requests to VITE_API_URL (default http://localhost:3001). All four backends listen on port 3001 and expose the same /api/todos + /api/invalidator contract.

Not on TanStack Start?

SPA integration guide

Full walkthrough for wiring query-tags into any SPA with a standalone backend — any framework, any runtime.

SPA guide →

Live demos

Interactive playground

Explore live SSE demos in the browser — tagged queries, group invalidation, multi-tab sync, and more. No local setup needed.

Explore demos →