sachinraja/trpc-playground

playground for running tRPC queries in the browser

Summary

trpc-playground is a browser-based playground for running tRPC queries, backed by CodeMirror and the TypeScript language server so editors get full type information from a router's input schemas. It ships framework-specific handlers that mount a UI for executing queries and mutations against an existing tRPC router. The package is MIT-licensed and written in TypeScript.

What it is useful for

The tool helps engineers explore and test a tRPC router without writing throwaway client code. Because input types are derived from the router, the editor surfaces the expected shape for each procedure while you type. It supports both queries and mutations, lets you run a single call or batch several at once, and lets you feed one query's result into the next. The README demonstrates chaining trpc.addNums.query({ a: 1, b: 2 }) into trpc.subtractNums.query({ a: sum, b: -7 }), which is useful for reproducing multi-step flows during debugging. It plays the same role for tRPC that a GraphQL playground does for GraphQL services, and uses the proxy vanilla client syntax: await trpc.path.query(input) and await trpc.path.mutate(input).

How engineers can use it

Install the package as documented:

npm install trpc-playground

Then mount a handler alongside the existing tRPC endpoint. The README shows a Next.js App Router example using fetchHandler from trpc-playground/handlers/fetch at src/app/api/trpc-playground/route.ts, with options for router, trpcApiEndpoint, and playgroundEndpoint. Next.js Pages Router users wire up nextHandler in pages/api/trpc-playground.ts, Express users add a second app.use route with expressHandler, and Nuxt users use h3Handler inside a defineLazyEventHandler. The README also lists support for Fastify, Fetch, h3, Koa, and AWS Lambda, imported as trpc-playground/handlers/{framework}. Inline snippets cover Next.js (both routers), Express, and Nuxt; for the others, the README points to the same import pattern and to the apps/next and apps/express example directories in the repository.

In the editor, write TypeScript that calls your procedures. Use the per-line run button or Alt + Q to execute a single query, and the center "Run all queries" button to execute everything in the file. The README notes that variables passed into a query are not defined when running individually, so declare them at the top level or use Promise.all([...]) to batch. If you use superjson, the handler snippets include a commented request: { superjson: true } option to enable.

Documented limitation: the default type resolver is zod-to-ts, which the README flags as having known gaps around z.lazy() and z.nativeEnum(). Full configuration options live in the API docs the README links to.