Probably the easiest and cheapest way to build a testing UI and documentation for your tRPC endpoints. tRPC panel automatically generates a UI for manually testing your tRPC backend with 0 overhead:
trpc panel moves as fast as your trpc backend with minimal effort.
Check out our test app
- ๐ Automatically inspect your tRPC router and recursively generate a typesafe UI
- ๐ Zero overhead
- No output schemas (procedure return types can be inferred as nature intended)
- New procedures will be added to your UI as you create them in your backend
- No compilation required, works with any backend
- ๐ Document your procedures and input parameters with minimal effort
- ๐ฆ Supports nested routers, and nested input objects. The structure of the UI maps one-to-one to your API's routers and procedures.
- ๐งญ SideNav and VSCode-like procedure / router search to quickly find what you're looking for
- โจ Transform data with built in
superjson
support.
Install with your preferred package manager:
yarn add trpc-panel
render your panel and return it from your backend (express example):
import { renderTrpcPanel } from "trpc-panel";
// ...
app.use("/panel", (_, res) => {
return res.send(
renderTrpcPanel(myTrpcRouter, { url: "http://localhost:4000/trpc" })
);
});
trpc-panel
just renders as a string, so it can be used with any backend.
In Nextjs you'd want to create an api route somewhere like src/pages/api/panel.ts
and send a text response:
import type { NextApiRequest, NextApiResponse } from "next";
import { renderTrpcPanel } from "trpc-panel";
import { appRouter } from "../../server/api/root";
export default async function handler(_: NextApiRequest, res: NextApiResponse) {
res.status(200).send(
renderTrpcPanel(appRouter, {
url: "http://localhost:3000/api/trpc",
transformer: "superjson",
})
);
}
Then we can visit the url http://localhost:3000/api/panel
to use the panel. Here we do transformer: "superjson"
assuming we have superjson
set as the transformer in tRPC (which create-t3-app does by default).
As of v1.1.0, trpc-panel
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:
trpc-panel
supports documenting procedures via trpc meta. First setup your trpc instance to be typed with TRPCPanelMeta
:
import { initTRPC } from "@trpc/server";
import { TRPCPanelMeta } from "trpc-panel";
const t = initTRPC.meta<TRPCPanelMeta>().create();
Then in your routers you can provide a description to the meta:
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}!` };
});
});
trpc-panel
supports documenting parameters via zod's .describe()
method. This allows developers to quickly write documentation as they're writing schemas:
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.
Trpc panel supports superjson
, just pass it into the transformer option:
app.use("/panel", (_, res) => {
return res.send(
renderTrpcPanel(myTrpcRouter, {
url: "http://localhost:4000/trpc",
transformer: "superjson",
})
);
});
trpc-panel
welcomes and encourages open source contributions. Please see our contributing guide for information on how to develop locally.
Currently, tRPC panel only supports tRPC v10 and only works with zod input schemas. With it's current design it would be feasible to easily add support for other input types as well
There are no plans to support v9 or other previous tRPC versions.
The following are supported
- Array
- BigInt
- Boolean
- Branded
- Default
- DiscriminatedUnion
- Effects
- Enum
- Literal
- Nullable
- Null
- Nullish
- Number
- Object
- Optional
- Promise
- String
- Undefined
We would like to add the following types:
- Union
- Tuple
- Record
- Never
- Map (superjson only)
- Set (superjson only)
- Date (superjson only)
- Any