UI for testing tRPC backends
npm install trpc-ui-zod4superjson support.
sh
npm install -D trpc-ui
`
`sh
yarn add -D trpc-ui
`
`sh
pnpm install -D trpc-ui
`
`sh
bun add -d trpc-ui
`
render your panel and return it from your backend as a text response (express example). You can also ensure that the panel is only available in development using dynamic imports and checking the NODE_ENV:
`js
app.use("/panel", (_, res) => {
if (process.env.NODE_ENV !== "development") {
return res.status(404).send("Not Found");
}
// Dynamically import renderTrpcPanel only in development
const { renderTrpcPanel } = await import("trpc-ui");
return res.send(
renderTrpcPanel(myTrpcRouter, {
url: "http://localhost:4000/trpc", // Base url of your trpc server
meta: {
title: "My Backend Title",
description:
"This is a description of my API, which supports markdown.",
},
})
);
});
`
trpc-ui just renders as a string, so it can be used with any backend.
To document your entire backend, you can pass in a metadata object with a title and description. To document individual procedures, see the documenting procedures.
Make sure you specify whether or not you are using superjson as a data transformer.
$3
Create a route handler somewhere like src/app/api/panel/route.ts
`ts
import { NextResponse } from "next/server";
import { appRouter } from "~/server/api/root";
export async function GET() {
if (process.env.NODE_ENV !== "development") {
return new NextResponse("Not Found", { status: 404 });
}
const { renderTrpcPanel } = await import("trpc-ui");
return new NextResponse(
renderTrpcPanel(appRouter, {
url: "/api/trpc", // Default trpc route in nextjs
transformer: "superjson", // Enabled by default with create-t3-app
}),
{
status: 200,
headers: [["Content-Type", "text/html"] as [string, string]],
}
);
}
`
Then we can visit the url http://localhost:3000/api/panel to use the panel.
$3
Create an api route somewhere like src/pages/api/panel.ts and send a text response:
`ts
import type { NextApiRequest, NextApiResponse } from "next";
import { appRouter } from "../../server/api/root";
export default async function handler(_: NextApiRequest, res: NextApiResponse) {
if (process.env.NODE_ENV !== "development") {
return res.status(404).send("Not Found");
}
const { renderTrpcPanel } = await import("trpc-ui");
res.status(200).send(
renderTrpcPanel(appRouter, {
url: "/api/trpc",
transformer: "superjson",
})
);
}
`
Documenting Procedures
trpc-ui supports documenting procedures.
Documentation is opt-in, meaning you only need to set it up if you want to use it. When docs are included for your trpc procedure, a "Docs" section will appear in your procedure:
!Documentation Example
$3
trpc-ui supports documenting procedures via trpc meta. First setup your trpc instance to be typed with TRPCPanelMeta:
`ts
import { initTRPC } from "@trpc/server";
import { TRPCPanelMeta } from "trpc-ui";
const t = initTRPC.meta().create();
`
Then in your routers you can provide a description to the meta:
`ts
export const appRouter = t.router({
sayHello: t.procedure
.meta({ / 👉 / description: "This shows in the panel." })
.input(z.object({ name: z.string() }))
.query(({ input }) => {
return { greeting: Hello ${input.name}! };
});
});
`
$3
Most descriptions don't need more than basic text, but descriptions for procedures and procedure descriptions can render markdown. This is most often useful for adding links within descriptions, but all markdown is supported thanks to react-markdown.
`ts
.meta({ / 👉 / description: "# H1 heading\nSome normal, or maybe bold text below, and a link to something important" })
`
$3
trpc-ui supports documenting parameters via zod's .describe() method. This allows developers to quickly write documentation as they're writing schemas:
`ts
export const appRouter = t.router({
sayHello: t.procedure
.input(z.object({
name: z.string().describe("The name to say hello too.")
}))
.query(({ input }) => {
return { greeting: Hello ${input.name}! };
});
});
`
Whatever you pass to describe() will appear in the docs section. Any input fields without a description will not appear in the docs section.
Data Transformers
Trpc panel supports superjson, just pass it into the transformer option:
`js
app.use("/panel", (_, res) => {
return res.send(
renderTrpcPanel(myTrpcRouter, {
url: "http://localhost:4000/trpc",
transformer: "superjson",
})
);
});
`
$3
When you are using superjson, the json editor will show a basic wrapping of superjson input. Your actual json input goes under the _json_ key, and information about how fields should be parsed goes under the _meta_ key. Do not delete the _json_ key or enter your input outside of it, or else your input will not be parsed correctly.
`json
{
"json": {},
"meta": {
"values": {}
}
}
`
Let's say on your backend, you want to have a zod validator like this, which supports data types not supported by json directly.
`ts
import { z } from "zod";
const UserSchema = z.object({
id: z.bigint(),
name: z.string(),
createdAt: z.date(),
tags: z.set(z.string()),
metadata: z.map(z.string(), z.string()),
});
type User = z.infer;
const user: User = {
id: BigInt("9007199254740991"),
name: "John Doe",
createdAt: new Date("2025-03-16T12:00:00Z"),
tags: new Set(["admin", "active"]),
metadata: new Map([
["lastLogin", new Date("2025-03-15T08:30:00Z")],
["loginCount", 42],
["isPremium", true],
["tier", "gold"],
]),
};
`
Enter the json supported equivalent under the _json_ key, and and specify how they should be parsed under the _meta.values_ key. Before validating this data on the backend, superjson will deserialize it back into JavaScript bigints, dates, sets, and maps, meaning it will pass your zod validation!
`json
{
"json": {
"id": "9007199254740991",
"name": "John Doe",
"createdAt": "2025-03-16T12:00:00.000Z",
"tags": ["admin", "active"],
"metadata": [["tier", "gold"]]
},
"meta": {
"values": {
"id": ["bigint"],
"createdAt": ["Date"],
"tags": ["set"],
"metadata": ["map"]
}
}
}
`
You will likely need to uncheck "validate input on client" in order to be able to send your validation to the backend when using custom superjson inputs
Also be warned that currently, input fields will not be rendered for superjson only inputs. You will have to input all data manually through the json editor.
Contributing
trpc-ui welcomes and encourages open source contributions. Please see our contributing guide for information on how to develop locally. Besides contributing PRs, one of the most helpful things you can to is to look at the existing feature proposals and leave a 👍 on the features that would be most helpful for you.
Comparisons
$3
trpc-openapi is designed for producing a REST API for external consumption from your trpc routers, not quickly testing your backed. If you do not care about exposing your API outside of your application, the additional overhead required to use trpc-openapi is not worth the effort. trpc-ui can be used with trpc-openapi, but the two libraries serve different purposes.
$3
trpc-playground is a great tool for testing your queries, but it requires writing code in the browser. trpc-ui` automatically generates intuitive typesafe forms for your procedures, allowing you to run tests without writing any code.