Generate type-safe API clients, TanStack Query/SWR hooks, Zod schemas, MSW mocks, Hono server handlers, MCP servers, and SolidStart actions from OpenAPI specs using Orval. Covers all clients (React/Vue/Svelte/Solid/Angular Query, Fetch, Axios), custom HTTP mutators, authentication patterns, NDJSON streaming, programmatic API, and advanced configuration.
Orval generates type-safe TypeScript clients, hooks, schemas, mocks, and server handlers from OpenAPI v3/Swagger v2 specifications.
npm install orval -D
# or yarn add orval -D
# or pnpm add orval -D
# or bun add orval -D
import { defineConfig } from 'orval';
export default defineConfig({
petstore: {
input: {
target: './petstore.yaml',
},
output: {
target: './src/api/petstore.ts',
schemas: './src/api/model',
client: 'react-query',
},
},
});
npx orval
npx orval --config ./orval.config.ts
npx orval --project petstore
npx orval --watch
| Use Case | Client | httpClient | Notes |
|---|---|---|---|
| React with server state | react-query | fetch or axios | TanStack Query hooks |
| Vue 3 with server state | vue-query | fetch or axios | TanStack Query for Vue |
| Svelte with server state | svelte-query | fetch or axios | TanStack Query for Svelte |
| SolidJS standalone app | solid-query | fetch or axios | TanStack Query for Solid |
| SolidStart full-stack | solid-start | native fetch | Uses query()/action() primitives |
| Angular with signals | angular-query | angular | Injectable functions, signal reactivity |
| Angular traditional | angular | — | HttpClient services |
| React with SWR | swr | fetch or axios | Vercel SWR hooks |
| Lightweight / Edge | fetch | — | Zero dependencies, works everywhere |
| Node.js / existing Axios | axios-functions | — | Factory functions (default) |
| Axios with DI | axios | — | Injectable Axios instance |
| Validation only | zod | — | Zod schemas, no HTTP client |
| Backend API server | hono | — | Hono handlers with Zod validation |
| AI agent tools | mcp | — | Model Context Protocol servers |
single — Everything in one file. Best for small APIs.split — Separate files: petstore.ts, petstore.schemas.ts, petstore.msw.ts. Good for medium APIs.tags — One file per OpenAPI tag + shared schemas. Organizes by domain.tags-split — Folder per tag with split files. Best for large APIs. Recommended.For react-query, vue-query, svelte-query, and swr clients: