| title | Playgrounds |
|---|---|
| description | Interactive development environments for exploring and testing oRPC functionality. |
Explore oRPC implementations through our interactive playgrounds, featuring pre-configured examples accessible instantly via StackBlitz or local setup.
| 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 | |
| Vue + Bun + Monorepo (Community) | View Source |
:::warning StackBlitz has own limitations, so some features may not work as expected. :::
If you prefer working locally, you can clone any playground using the following commands:
npx degit middleapi/orpc/playgrounds/next orpc-next-playground
npx degit middleapi/orpc/playgrounds/tanstack-start orpc-tanstack-start-playground
npx degit middleapi/orpc/playgrounds/nuxt orpc-nuxt-playground
npx degit middleapi/orpc/playgrounds/solid-start orpc-solid-start-playground
npx degit middleapi/orpc/playgrounds/svelte-kit orpc-svelte-kit-playground
npx degit middleapi/orpc/playgrounds/astro orpc-astro-playground
npx degit middleapi/orpc/playgrounds/contract-first orpc-contract-first-playground
npx degit middleapi/orpc/playgrounds/nest orpc-nest-playground
npx degit middleapi/orpc/playgrounds/cloudflare-worker orpc-cloudflare-worker-playground
npx degit middleapi/orpc/playgrounds/bun-websocket-otel orpc-bun-websocket-otel-playground
npx degit middleapi/orpc/playgrounds/electron orpc-electron-playground
npx degit middleapi/orpc/playgrounds/browser-extension orpc-browser-extension-playground
npx degit middleapi/orpc-multiservice-monorepo-playground orpc-multiservice-monorepo-playground
# Community (clone at your own risk)
npx degit hunterwilhelm/orpc-community-playgrounds/vue-bun orpc-vue-bun-monorepo-playgroundFor each project, set up the development environment:
# Install dependencies
npm install
# Start the development server
npm run devThat's it! You can now access the playground at http://localhost:3000.