npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rikkainc/trpc-panel

v1.0.0

Published

UI for testing tRPC backends

Downloads

312

Readme

tRPC.panel()

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:

Screenshot 2022-12-08 at 7 24 02 PM

trpc panel moves as fast as your trpc backend with minimal effort.

Check out our test app

Features

  • 🚀 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.

Quick Start

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.

NextJS / create-t3-app example

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).

Documenting Procedures

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:

Documentation Example

Procedure Descriptions

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}!` };
    });
});

Input Parameter Descriptions

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.

Data Transformers

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",
    })
  );
});

Contributing

trpc-panel welcomes and encourages open source contributions. Please see our contributing guide for information on how to develop locally.

Limitations

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.

Supported zod types

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