tRPC Studio

Embeddable tRPC API explorer and testing interface with adapters for multiple backend frameworks.

Installation

pnpm add @trpc-studio/studio

Framework Adapters

Next.js (App Router)

// app/studio/route.ts
import { tRPCStudioNextHandler } from '@trpc-studio/studio';

export const GET = tRPCStudioNextHandler({
  endpoint: '/api/trpc',
  title: 'My tRPC Studio'
});

Express

import express from 'express';
import { tRPCStudioExpressHandler } from '@trpc-studio/studio';

const app = express();

app.get('/studio', tRPCStudioExpressHandler({
  endpoint: '/trpc',
  title: 'My tRPC Studio'
}));

app.listen(3000);

Fastify

import Fastify from 'fastify';
import { tRPCStudioFastifyHandler } from '@trpc-studio/studio';

const fastify = Fastify();

fastify.get('/studio', tRPCStudioFastifyHandler({
  endpoint: '/trpc',
  title: 'My tRPC Studio'
}));

fastify.listen({ port: 3000 });

Hono

import { Hono } from 'hono';
import { tRPCStudioHonoHandler } from '@trpc-studio/studio';

const app = new Hono();

app.get('/studio', tRPCStudioHonoHandler({
  endpoint: '/trpc',
  title: 'My tRPC Studio'
}));

export default app;

Bun

import { tRPCStudioBunHandler } from '@trpc-studio/studio';

const studioHandler = tRPCStudioBunHandler({
  endpoint: '/trpc',
  title: 'My tRPC Studio'
});

Bun.serve({
  port: 3000,
  fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === '/studio') {
      return studioHandler();
    }
    return new Response('Not Found', { status: 404 });
  },
});

Node.js HTTP

import { createServer } from 'http';
import { tRPCStudioNodeHandler } from '@trpc-studio/studio';

const studioHandler = tRPCStudioNodeHandler({
  endpoint: '/trpc',
  title: 'My tRPC Studio'
});

createServer((req, res) => {
  if (req.url === '/studio') {
    return studioHandler(req, res);
  }
  res.writeHead(404);
  res.end('Not Found');
}).listen(3000);

Configuration

All adapters accept the same configuration interface:

interface StudioConfig {
  endpoint?: string; // tRPC endpoint URL (e.g., '/api/trpc')
  title?: string;    // Browser page title
}

Advanced Usage

Custom HTML Generation

If you need more control, use the core HTML generator:

import { getStudioHTML } from '@trpc-studio/studio';

const html = getStudioHTML({
  endpoint: '/api/trpc',
  title: 'Custom Studio'
});

// Use html string however you need

Development

# Build the studio UI
pnpm build

License

MIT