explaingit

orval-labs/orval

★ 5,806TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Orval generates TypeScript API client code from OpenAPI or Swagger specs, supporting React Query, Vue Query, Angular, Zod, and MSW mocks so you never write HTTP boilerplate by hand.

Mindmap

mindmap
  root((orval))
    What it does
      Generates TypeScript clients
      Reads OpenAPI and Swagger
      Outputs framework-specific code
    Supported Targets
      React and Vue Query
      Angular services
      MSW mock handlers
    Use Cases
      No-boilerplate API calls
      Frontend type safety
      API mock for testing
    Audience
      Frontend developers
      TypeScript engineers
      Full-stack teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Generate TypeScript fetch functions and type definitions from your backend's OpenAPI spec automatically.

USE CASE 2

Create React Query hooks for every API endpoint from an OpenAPI file in a single command.

USE CASE 3

Generate MSW mock handlers from your OpenAPI spec to test your frontend UI without a real backend running.

USE CASE 4

Keep your frontend API client in sync with backend API changes by re-running Orval after spec updates.

Tech stack

TypeScriptBunOpenAPIReact QueryVue QueryAngularZodMSW

Getting it running

Difficulty · easy Time to first run · 5min

Requires an existing OpenAPI or Swagger spec file, generated code depends on whichever client library you configure (e.g. React Query must be installed separately).

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

Orval is a code generation tool for TypeScript developers. It reads an API specification file (in OpenAPI v3 or Swagger v2 format, either YAML or JSON) and automatically generates all the TypeScript code you need to call that API from your frontend application. Instead of writing HTTP request functions and type definitions by hand, you run Orval and it produces them for you. The generated code can target several different client libraries and frameworks. Orval supports plain fetch calls, React Query, Vue Query, Svelte Query, Solid Query, Angular, Angular Query, SolidStart, Hono, and Zod schema validation. It also generates mock handlers for testing with Mock Service Worker (MSW), so you can test your UI against a fake API without a real server running. You configure Orval through a config file where you point it at your OpenAPI spec (which can be a local file or a remote URL) and tell it where to write the output and which client type to generate. Running the orval command then produces the files. When your API changes, you re-run Orval to update the generated code. The project is written in TypeScript and uses Bun for its own build and test process. The repository includes sample projects for each supported framework so you can see what the generated output looks like before setting it up in your own project. There is also a playground on the project website where you can try it without installing anything. Orval is MIT licensed and maintained through open-source contributions. The project is funded through Open Collective, and financial supporters have their logos listed in the README.

Copy-paste prompts

Prompt 1
Generate a React Query client for my OpenAPI 3 spec using Orval, show me the config file and the CLI command.
Prompt 2
How do I configure Orval to generate Zod validation schemas alongside the TypeScript types from my Swagger spec?
Prompt 3
Set up Orval to generate MSW mock handlers from an OpenAPI spec so I can test my React app without a real backend.
Prompt 4
How do I point Orval at a remote OpenAPI URL instead of a local file, and automatically regenerate on API changes?
Prompt 5
Show me an Orval config that generates an Angular service for a specific set of endpoints from an OpenAPI spec.
Open on GitHub → Explain another repo

← orval-labs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.