This document provides technical documentation for the six web framework playgrounds included in the oRPC monorepo. These playgrounds demonstrate production-ready oRPC integrations for Next.js, Nuxt, SvelteKit, Astro, TanStack Start, and SolidStart frameworks. Each playground implements a complete client-server architecture using oRPC's type-safe RPC protocol, OpenAPI generation, and framework-specific query integration.
For special deployment environments (Electron, Cloudflare Workers, browser extensions, Bun WebSocket), see Special Environment Examples. For architectural pattern demonstrations (contract-first, NestJS, OpenTelemetry), see Pattern Examples. For UI framework integration details, see UI Framework Integrations.
Sources: playgrounds/next/package.json1-30 playgrounds/nuxt/package.json1-25 playgrounds/svelte-kit/package.json1-32 playgrounds/astro/package.json1-31 playgrounds/tanstack-start/package.json1-36 playgrounds/solid-start/package.json1-25
All web framework playgrounds are located in the playgrounds/ directory at the monorepo root. Each playground is a self-contained application with its own package configuration, development server, and build process.
Sources: playgrounds/next/package.json1-30 playgrounds/nuxt/package.json1-25 playgrounds/svelte-kit/package.json1-32 playgrounds/astro/package.json1-31 playgrounds/tanstack-start/package.json1-36 playgrounds/solid-start/package.json1-25
All web framework playgrounds share a core set of oRPC packages that provide consistent functionality across frameworks. The table below shows which packages are used in each playground:
| Package | Next.js | Nuxt | SvelteKit | Astro | TanStack Start | SolidStart |
|---|---|---|---|---|---|---|
@orpc/client | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/server | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/zod | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/tanstack-query | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/openapi | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/json-schema | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
@orpc/react | ✓ | - | - | ✓ | ✓ | - |
All playgrounds use Zod for schema validation, TanStack Query for data fetching, and include OpenAPI generation capabilities. React-based frameworks (Next.js, Astro, TanStack Start) additionally use @orpc/react for server actions and form handling.
Sources: playgrounds/next/package.json11-28 playgrounds/nuxt/package.json12-24 playgrounds/svelte-kit/package.json14-29 playgrounds/astro/package.json12-29 playgrounds/tanstack-start/package.json12-34 playgrounds/solid-start/package.json10-24
Each playground implements framework-specific TanStack Query integration. The core @orpc/tanstack-query package provides framework-agnostic logic, while framework-specific packages provide idiomatic hooks and composables.
Sources: packages/tanstack-query/package.json36-54 packages/solid-query/package.json38-49 packages/svelte-query/package.json38-49
The Next.js playground demonstrates oRPC integration with Next.js App Router, including server components, server actions, and client-side data fetching.
| Script | Command | Purpose |
|---|---|---|
dev | next dev --turbopack --port 3000 | Start development server with Turbopack |
build | next build | Build production application |
start | next start --port 3000 | Start production server |
type:check | tsc --noEmit | Type checking without emit |
The Next.js playground uses the experimental Turbopack bundler for faster development builds and runs on port 3000 to avoid conflicts with other playgrounds.
Sources: playgrounds/next/package.json1-30
The Nuxt playground demonstrates oRPC integration with Nuxt 3, including server routes, composables, and Vue Query integration.
| Script | Command | Purpose |
|---|---|---|
dev | nuxt dev | Start Nuxt development server |
build | nuxt build | Build production application |
generate | nuxt generate | Generate static site |
preview | nuxt preview | Preview production build |
postinstall | nuxt prepare | Prepare Nuxt environment |
The Nuxt playground uses the latest Vue and Vue Router versions, leveraging Nuxt's auto-import capabilities for oRPC client composables.
Sources: playgrounds/nuxt/package.json1-25
The SvelteKit playground demonstrates oRPC integration with SvelteKit's server-side rendering, form actions, and Svelte Query integration.
| Script | Command | Purpose |
|---|---|---|
dev | vite dev --port 3000 | Start Vite development server |
build | vite build | Build production application |
preview | vite preview | Preview production build |
prepare | svelte-kit sync | Sync SvelteKit types |
type:check | svelte-kit sync && svelte-check --tsconfig ./tsconfig.json | Type checking with Svelte |
The SvelteKit playground uses Svelte 5's latest features and runs on port 3000. It includes the @sveltejs/adapter-auto for automatic deployment adapter selection.
Sources: playgrounds/svelte-kit/package.json1-32
The Astro playground demonstrates oRPC integration with Astro's partial hydration architecture, using React components for interactive islands.
| Script | Command | Purpose |
|---|---|---|
dev | astro dev | Start Astro development server |
build | astro build | Build production application |
preview | astro preview | Preview production build |
type:check | astro check | Type checking with Astro |
The Astro playground uses @astrojs/react to enable React components within Astro islands, allowing oRPC client-side interactions while maintaining Astro's performance benefits.
Sources: playgrounds/astro/package.json1-31
The TanStack Start playground demonstrates oRPC integration with TanStack's full-stack React framework, including file-based routing and server functions.
| Script | Command | Purpose |
|---|---|---|
dev | vite dev | Start Vite development server |
build | vite build | Build production application |
start | node .output/server/index.mjs | Start production server |
type:check | tsc --noEmit | Type checking without emit |
The TanStack Start playground includes both React Query and React Router devtools for enhanced development experience. It uses Vite for bundling and outputs a Node.js server in .output/server/.
Sources: playgrounds/tanstack-start/package.json1-36
The SolidStart playground demonstrates oRPC integration with Solid.js's reactive framework and SolidStart's file-based routing system.
| Script | Command | Purpose |
|---|---|---|
dev | vinxi dev | Start Vinxi development server |
build | vinxi build | Build production application |
start | node .output/server/index.mjs | Start production server |
type:check | tsc --noEmit | Type checking without emit |
The SolidStart playground uses Vinxi as its build tool (a Vite-based meta-framework builder) and includes vite-plugin-top-level-await for top-level await support in modules.
Sources: playgrounds/solid-start/package.json1-25
All web framework playgrounds use TypeScript with version ~5.9.3 (Next.js, SvelteKit, Electron, Astro, Cloudflare Worker, Browser Extension) or ~5.8.3 (other playgrounds). The tilde (~) version constraint allows patch-level updates but prevents minor version changes, ensuring consistency across the monorepo.
Each playground provides a type:check script for continuous integration and pre-commit hooks:
Sources: playgrounds/next/package.json9 playgrounds/nuxt/package.json10 playgrounds/svelte-kit/package.json11 playgrounds/astro/package.json10 playgrounds/tanstack-start/package.json10 playgrounds/solid-start/package.json8
All playgrounds follow a consistent server setup pattern using @orpc/server to define procedures and routers:
os builder with .input(), .output(), and .handler().prefix() and .tag()@orpc/openapiAll playgrounds follow a consistent client setup pattern:
createORPCClient with RPCLink@orpc/tanstack-queryAll playgrounds include @orpc/openapi and @orpc/json-schema dependencies for automatic OpenAPI 3.1.1 specification generation from oRPC routers. This enables:
OpenAPIHandlerSources: playgrounds/next/package.json11-28 playgrounds/nuxt/package.json12-24 playgrounds/svelte-kit/package.json14-29 playgrounds/astro/package.json12-29 playgrounds/tanstack-start/package.json12-34 playgrounds/solid-start/package.json10-24
Most playgrounds are configured to run on specific ports to avoid conflicts during concurrent development:
| Playground | Port | Configuration |
|---|---|---|
| Next.js | 3000 | --port 3000 flag |
| SvelteKit | 3000 | --port 3000 flag |
| Nuxt | Default | Auto-assigned by Nuxt |
| Astro | Default | Auto-assigned by Astro |
| TanStack Start | Default | Auto-assigned by Vite |
| SolidStart | Default | Auto-assigned by Vinxi |
Each framework produces different build artifacts:
.next/ directory with optimized pages and server bundles.nuxt/ directory with optimized assets and .output/ for deployment.svelte-kit/ directory with build artifacts and build/ for static outputdist/ directory with static files and server bundles.output/server/ directory with Node.js server.output/server/ directory with Node.js serverSources: playgrounds/next/package.json5-9 playgrounds/nuxt/package.json5-10 playgrounds/svelte-kit/package.json6-12 playgrounds/astro/package.json5-10 playgrounds/tanstack-start/package.json6-10 playgrounds/solid-start/package.json4-8
All web framework playgrounds use the next workspace protocol to reference local oRPC packages during development. This ensures that changes to core oRPC packages are immediately reflected in playground applications without requiring package republishing.
The next specifier in package.json dependencies creates symlinks to local packages, enabling hot module replacement and immediate testing of API changes across the entire ecosystem.
Sources: playgrounds/next/package.json12-18 playgrounds/nuxt/package.json13-18 playgrounds/svelte-kit/package.json15-20 playgrounds/astro/package.json15-21 playgrounds/tanstack-start/package.json13-19 playgrounds/solid-start/package.json11-16
Refresh this wiki
This wiki was recently refreshed. Please wait 1 day to refresh again.