Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

Experience the full power of TypeScript inference and boost productivity while building your next full-stack application.

Star

Quickstart

The client above is not importing any code from the server, only its type declarations.

Supported by

49 more

Many thanks to all of our amazing sponsors!

Automatic typesafety

Made a server side change? TypeScript will warn you of errors on your client before you even save the file!

Snappy DX

tRPC has no build or compile steps, meaning no code generation, runtime bloat or build pipeline.

Framework agnostic

Compatible with all JavaScript frameworks and runtimes. It's easy to add to your existing projects.

Autocompletion

Using tRPC is like using a SDK for your API's server code giving you confidence in your endpoints.

Light bundle size

tRPC has zero dependencies and a tiny client-side footprint making it lightweight.

Batteries included

We provide adapters for React, Next.js, Express, Fastify, Lambda.

Simple to use with
unmatched developer experience

It's quick and easy to get started using tRPC and build a type safe API.

ts
const t = initTRPC.create();
 
const appRouter = t.router({
  greeting: t.procedure
    .input(z.object({ name: z.string() }))
    .query((req) => {
      const { input } = req;
               const input: {
    name: string;
}
      return {
        text: `Hello ${input.name}`,
      };
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const appRouter = t.router({
  greeting: t.procedure
    .input(z.object({ name: z.string() }))
    .query((req) => {
      const { input } = req;
               const input: {
    name: string;
}
      return {
        text: `Hello ${input.name}`,
      };
  }),
});
 
export type AppRouter = typeof appRouter;

Define your procedures

The first step to creating a tRPC API is to define your procedures. Procedures are composable and can be queries, mutations, or subscriptions. Routers contain multiple procedures.

Here, we add a Zod validator to ensure the input from the client is exactly what we expect it to be.

At the end, we export the type of our router so that we can use it to provide a fully-typed experience on the client without importing any server code.

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
// The API will now be listening on port 3000!
listen(3000);

Create your HTTP server

Next, we create our HTTP server using our appRouter . We now have a tRPC server running!

tRPC comes with many adapters, allowing you to create a server using your favorite framework like Next.js, the Fetch API (Astro, Remix, SvelteKit, Cloudflare Workers, etc.), Express, Fastify, AWS Lambda, or a vanilla Node HTTP server.

ts
const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });
      const res: {
    text: `Hello ${string}`;
}

ts
const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });
      const res: {
    text: `Hello ${string}`;
}

Connect your client and start querying!

Now that we have the server running, we can create a client and start querying data.

We pass the AppRouter type when creating the client to give us TypeScript autocompletion and intellisense that matches the backend API without requiring any code generation!

Try it out for yourself!

This is a minimal full-stack React-application using tRPC & Next.js

Use this template

You may not need a traditional API

I built tRPC to allow people to move faster by removing the need of a traditional API-layer, while still having confidence that our apps won't break as we rapidly iterate.
Try it out for yourself and let us know what you think!