Playgrounds

Explore oRPC implementations through our interactive playgrounds, featuring pre-configured examples accessible instantly via StackBlitz or local setup.

Available Playgrounds

Environment	StackBlitz	GitHub Source
Next.js Playground	Open in StackBlitz	View Source
TanStack Start Playground	Open in StackBlitz	View Source
Nuxt.js Playground	Open in StackBlitz	View Source
Solid Start Playground	Open in StackBlitz	View Source
Svelte Kit Playground	Open in StackBlitz	View Source
Astro Playground	Open in StackBlitz	View Source
Contract-First Playground	Open in StackBlitz	View Source
NestJS Playground	Open in StackBlitz	View Source
Cloudflare Worker	Open in StackBlitz	View Source
Bun WebSocket + OpenTelemetry		View Source
Electron Playground		View Source
Browser Extension Playground		View Source
Multiservice Monorepo Playground		View Source

WARNING

StackBlitz has own limitations, so some features may not work as expected.

Local Development

If you prefer working locally, you can clone any playground using the following commands:

npx giget gh:middleapi/orpc/playgrounds/next#1.x orpc-next-playground
npx giget gh:middleapi/orpc/playgrounds/tanstack-start#1.x orpc-tanstack-start-playground
npx giget gh:middleapi/orpc/playgrounds/nuxt#1.x orpc-nuxt-playground
npx giget gh:middleapi/orpc/playgrounds/solid-start#1.x orpc-solid-start-playground
npx giget gh:middleapi/orpc/playgrounds/svelte-kit#1.x orpc-svelte-kit-playground
npx giget gh:middleapi/orpc/playgrounds/astro#1.x orpc-astro-playground
npx giget gh:middleapi/orpc/playgrounds/contract-first#1.x orpc-contract-first-playground
npx giget gh:middleapi/orpc/playgrounds/nest#1.x orpc-nest-playground
npx giget gh:middleapi/orpc/playgrounds/cloudflare-worker#1.x orpc-cloudflare-worker-playground
npx giget gh:middleapi/orpc/playgrounds/bun-websocket-otel#1.x orpc-bun-websocket-otel-playground
npx giget gh:middleapi/orpc/playgrounds/electron#1.x orpc-electron-playground
npx giget gh:middleapi/orpc/playgrounds/browser-extension#1.x orpc-browser-extension-playground
npx giget gh:middleapi/orpc-multiservice-monorepo-playground#1.x orpc-multiservice-monorepo-playground

For each project, set up the development environment:

# Install dependencies
npm install

# Start the development server
npm run dev

That's it! You can now access the playground at http://localhost:3000.