NOW LIVE

Kubb Studio is live.

Open Kubb Studio →
Skip to content
Kubb 5.x · API spec to code 10.7M yearly downloads

Turn your API spec into type-safe code.

Kubb is an open source code generator. Point it at your API spec and get TypeScript types, fetch or axios clients, TanStack Query and SWR hooks, Zod schemas and MSW mocks, always in sync with your API.
Get started
npx kubb init
Change the spec. Every layer follows.
Try:Run it for real →

petStore.yaml

Pet:
  type: object
  required: [id, name]
  properties:
    id: { type: integer }
    name: { type: string }
    status:
      type: string
      enum: [available, pending, sold]
export type Pet = {
  id: number
  name: string
  status?: PetStatusEnumKey
}
$ kubb generate · no changes✓ in sync
Why Kubb

Hand-written API code drifts. Generated code can't.

Every team that talks to an API writes the same layers by hand, and they slowly fall out of step with the backend.
Without Kubb

Types drift from the API

Someone copies a response into an interface. Months later the backend renames a field and nothing complains.

interface Pet {
  id: number
  name: string // the API sends petName now
}
With Kubb

Generated from the spec

Types come from the spec on every run. A rename shows up as a compile error where your code reads the field.

import type { Pet } from './gen/types/Pet'
How it works

Four steps, then it runs on every change.

An adapter, a shared AST and parsers do the work underneath. You only meet them when you write your own plugin.
1 · Point at your spec
A local file or a URL. Run npx kubb init and it writes kubb.config.ts for you.
2 · Pick your plugins
List the layers your stack uses. Each plugin adds one kind of file: types, clients, hooks, schemas or mocks.
3 · Import the output
Code lands in src/gen with barrel files and formatting done. Import it like any other module.
4 · Regenerate on change
Run kubb generate in CI or with --watch. A breaking API change becomes a type error, not a bug report.
See it in action

One operation in your spec. Every layer generated.

Every plugin reads the same parsed operation, so names and types line up across files. Pick a layer to see the file Kubb writes for it.
src/gen/types/Pet.ts
export const petStatusEnum = {
  available: 'available',
  pending: 'pending',
  sold: 'sold',
} as const

export type PetStatusEnumKey = (typeof petStatusEnum)[keyof typeof petStatusEnum]

export type Pet = {
  id: number
  name: string
  status?: PetStatusEnumKey
}
Try it live

Run Kubb in your browser.

Start Node in this tab, install Kubb with npm ci and run kubb generate --watch on a Pet Store spec. Edit the spec, then watch the generated type and the type check of the code that reads it. Setup takes about a minute.

Runs in a WebContainer in this tab, with Kubb telemetry off. Your edits never leave the page, and closing the tab stops it.

Pick your stack

Only generate what you use.

Choose your layers and see the config you would write and the files Kubb would generate.
HTTP client
Data fetching
Validation
Mocks
kubb.config.ts
import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFetch } from '@kubb/plugin-fetch'
import { pluginReactQuery } from '@kubb/plugin-react-query'
import { pluginZod } from '@kubb/plugin-zod'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen', clean: true },
  plugins: [
    pluginTs(),
    pluginFetch(),
    pluginReactQuery(),
    pluginZod(),
  ],
})
  • src/gen/# plus an index.ts barrel in every folder
    • types/# plugin-ts
      • Pet.ts
      • GetPetById.ts
    • clients/# plugin-fetch
      • getPetById.ts
    • hooks/# plugin-react-query
      • useGetPetById.ts
    • zod/# plugin-zod
      • petSchema.ts
    • index.ts
Ecosystem

Adapters, plugins and parsers

Mix and match the plugins your stack needs, or write your own with the same API the official ones use.
Plugins
14 official plugins. Each one writes one kind of file.
  • plugin-axiosAxios
  • plugin-barrelBarrel
  • plugin-clientClient
  • plugin-cypressCypress
  • plugin-fakerFaker
  • plugin-fetchFetch
  • plugin-mcpMCP
  • plugin-mswMSW
  • plugin-react-queryReact Query
  • plugin-redocRedoc
  • plugin-swrSWR
  • plugin-tsTypeScript
  • plugin-vue-queryVue Query
  • plugin-zodZod
Adapters
1 adapter that reads OpenAPI 2.0, 3.0, 3.1 and 3.2, resolves every $ref and hands each plugin the same AST.
Parsers
2 parsers that print generated code as TypeScript or Markdown, formatted and linted.

Review every generated change in Kubb Studio.

Connect the Kubb CLI or a Docker agent, generate from the browser and diff the output before it reaches your repository. Code stays on machines you control unless you allow Studio to read it.
Kubb Studio · types/Pet.ts
export type Pet = {
  id: number
  name: string
  petName: string
  status?: PetStatusEnumKey
}

Generate your first client in minutes.

Run npx kubb init, point it at your API spec and get type-safe code.