What is Kubb? Automatic Code Generation from Swagger with React Query and Zod

Introduction

A few weeks ago, I shared an article about Using OpenAPI Generator in Frontend Projects. The Kubb tool we'll be discussing in this article serves essentially the same purpose. Before you say "Well, if they do the same thing, why is this article being written?" — let me explain.

There are differences between what Swagger + OpenAPI Generator provides and what Swagger + Kubb provides.

If you're thinking "I just need the types, I'll write the client myself" — OpenAPI Generator is sufficient.

If you're thinking "I want full automation from Swagger, all the way down to hooks" — then what you need is Kubb.

Kubb's usage logic is exactly the same as OpenAPI Generator. You provide a swagger.json as a reference, and Kubb reads that swagger structure to generate the API documents for you.

Kubb is not built on Java like OpenAPI Generator. It runs directly on the JavaScript runtime. Instead of trying to support all platforms like OpenAPI Generator, it takes a frontend-first approach. This way, you can add the plugins you want and configure them according to your frontend framework.

In this article, I'll be explaining everything through React.

Kubb

Kubb is a tool that automatically generates type-safe API clients, React Query hooks, and Zod validation schemas from Swagger (OpenAPI) documents.

In short: your backend gives you Swagger → Kubb generates the entire frontend API layer for you.

Common problems we face in frontend projects:

• Writing the same API endpoints over and over
• Incorrect type/interface usage (type safety)
• Frontend breaking when the backend changes
• Lack of validation

Kubb solves these problems for us:

• Automatic API client generation
• TypeScript type safety
• React Query integration
• Runtime validation with Zod

How Does It Work?

Alright, we've explained the requirements and all that, but how does it actually do these things? How does it work?

Kubb reads the OpenAPI (Swagger) file and generates the following structures:

• API functions
• React Query hooks (useQuery, useMutation)
• TypeScript types
• Zod schemas

Installation

Adding Kubb to your project is very simple:

npm install kubb

Then create a config file kubb.config.ts:

import { defineConfig } from '@kubb/core'

export default defineConfig({
  input: {
    path: 'https://api.example.com/swagger.json',
  },
  output: {
    path: './src/api',
  },
})

That's it... Yes, really, that's it. It will take the information from the swagger.json we provided as input and generate the structures mentioned above in the output directory. But first, we need to run the generate command.

Code Generation (Kubb Generate)

We create the entire API layer with a single command:

npx kubb generate

After this command, the following folders are automatically created in your project:

• queries/
• mutations/
• schemas/
• types/

React Query Integration

One of Kubb's greatest strengths is its direct integration with React Query.

For example:

const { data, isLoading } = useGetUsers()

Now you have:

• Loading state — ready
• Error handling — ready
• Caching — ready

No extra code needed.

Validation with Zod

Kubb doesn't just generate types (type/interface), it also provides runtime validation.

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
})

This allows us to:

• Validate data coming from the API at runtime.
• Catch unexpected responses.

How Kubb Differs from OpenAPI Generator

What sets Kubb apart from other tools:

• It doesn't just generate a client → it generates hooks
• It doesn't just generate types → it generates validation
• It's compatible with the modern stack (React Query, Zod)

Thanks to everyone who read this far. See you in the next article.