tRPC Visualizer

End-to-end typesafe APIs — interactive architecture, request flow, and real-world examples

tRPC — End-to-End Typesafe APIs

Your backend types automatically flow to the frontend. No codegen. No schema files. No runtime type errors. Just TypeScript.

Compile Time

Type Errors Caught

Zero

Schema Duplication

~5 KB

Bundle Overhead

Backend

// backend — Express route
app.get("/user/:id", (req, res) => {
  const user = db.user.findUnique({
    where: { id: Number(req.params.id) }
  });
  res.json(user);
});

Frontend

// frontend — manual types 😰
type User = {
  id: number;
  name: string;
  email: string;  // ← Did backend add this?
};

const res = await fetch("/user/1");
const user: User = await res.json();
// ❌ No guarantee types match backend
// ❌ Manual type duplication
// ❌ Runtime errors if API changes

Manual type duplication between frontend & backend

No compile-time safety — types can drift

Runtime errors when API changes

Fetch boilerplate everywhere

No autocompletion for API contracts

REST vs GraphQL vs tRPC

Feature	REST	GraphQL	tRPC
Type Safety	❌ Manual	⚠️ Codegen	✅ Automatic
Schema File	Optional	Required	None needed
Validation	Manual	Partial	Zod built-in
Learning Curve	Low	High	Low
Overfetching	Common	Solved	Solved
Bundle Size	~0 KB	~30-50 KB	~5 KB
DX (Autocompletion)	None	With codegen	Full
Best For	Simple APIs	Complex data	TS full-stack

Core Concepts

Procedures

The building blocks — query (GET), mutation (POST), subscription (WebSocket)

Routers

Organize procedures into namespaced groups — like Express Router but typed

Context & Middleware

Auth, logging, rate limiting — all with full type inference

Input Validation

Zod schemas validate + infer types at once — zero duplication