Skip to main content
CodeAlchemy

OpenAPI → TS

Generate TypeScript interfaces and Zod schemas from any OpenAPI spec.

client-sidefree
Sample:
Input
Loading editor…
Loading editor…

Runs entirely in your browser. No server calls.

How to use OpenAPI → TS

01

Paste your spec

Drop an OpenAPI 3.x YAML or JSON spec into the left panel, or load one of the samples.

02

Set options and convert

Choose naming, HTTP client, and validation style, then click Convert or press ⌘↵.

03

Copy the output

Switch between types, schemas, client, and hooks tabs. Copy or download any tab.

Frequently asked questions

Is this free?↓

Yes, completely free. No sign-up, no rate limits.

Does my code get sent to a server?↓

No. All conversion runs entirely in your browser using JavaScript. Nothing is sent to any server.

Which OpenAPI versions are supported?↓

OpenAPI 3.x (3.0 and 3.1). YAML and JSON are both accepted.

Are $ref cross-file references supported?↓

Local $ref within the same document are resolved. External file or URL references are not supported.

Try other tools

View all

GraphQL → TS

Convert GraphQL SDL to TypeScript types and realistic mock data.

client-sidefree

SQL → ORM

Convert SQL DDL to Prisma or Drizzle schema definitions instantly.

client-sidefree

Tailwind ↔ CSS

Convert Tailwind classes to vanilla CSS and back. Instant. Client-side.

client-sidefree

Long-form guide

Turn an OpenAPI spec into TypeScript types and Zod schemas

OpenAPI → TypeScript generates the type system, runtime validators, and HTTP client that your frontend would otherwise hand-write to talk to a documented API. Drop in an OpenAPI 3.0 or 3.1 spec — YAML or JSON — and you'll get a tight set of TypeScript interfaces, optional Zod schemas, an HTTP client (fetch or axios), and TanStack Query hooks per operation. All of it runs in your browser; the spec never goes to a server.

How to use it

  1. Drop in or paste your spec. The left panel accepts either YAML or JSON. You can paste up to a few megabytes; the editor uses Monaco so very large specs feel responsive. Use the Sample selector to load a typical PetStore spec if you want to see what it produces before pasting your own.
  2. Pick options. Naming controls how operations and schemas are named — PascalCase is the default and produces names like LoginRequest and User. HTTP client toggles between fetch (zero dependencies) and axios (uses axios.create). Validation lets you emit Zod schemas alongside or instead of plain interfaces. Base URL gets prepended to every generated request URL — leave it empty for relative paths.
  3. Click Convert (or press ⌘↵). The output panel splits into tabs: types, schemas, client, hooks. Each tab is independently copyable and downloadable, so you can drop just the types into one file and the client into another.
  4. Copy or download. Per-tab copy buttons live in the top-right of each output. The download button packages the active tab into a .ts file with the right header.

What the generator handles

Every schema in components.schemas becomes either a plain interface (when validation is off) or a Zod schema with an inferred type (when validation is on). oneOf, anyOf, and allOf map to TypeScript discriminated unions, intersections, and so on. Required vs optional properties are tracked, as are nullable types and enums. Format hints — uuid, email, date-time — propagate into Zod's z.string().uuid() etc.

Operations from paths become functions on the generated client. Path parameters are encoded into the URL, query parameters are appended, request bodies are serialized as JSON. Each operation also produces a TanStack Query hook (useQuery for GETs, useMutation for everything else) with the right cache key and the correct response type.

Local $ref is resolved fully, including recursive types and circular references. External references (other files, remote URLs) are not handled — bundle your spec first with a tool like swagger-cli bundle if you need them. OpenAPI 3.0 and 3.1 are both accepted; the tool autodetects.

When to reach for it

The classic case is starting a frontend against a finished backend. Instead of writing types by hand and watching them drift, you import the spec, generate the client, and ship. When the backend changes, you re-run the converter and TypeScript points to anything that broke.

Another good fit is contract testing. You can generate Zod schemas from your spec and run them as runtime checks in your tests, catching the moment a response stops matching documentation. And for documentation reviews, the generator shows you exactly which TypeScript shape a backend team's spec implies — useful when the words are vague but the schema is precise.

Examples

Minimal spec to interfaces
Input · yaml
openapi: 3.0.0
info:
  title: My API
  version: 1.0.0
components:
  schemas:
    User:
      type: object
      required: [id, email]
      properties:
        id:
          type: string
        email:
          type: string
        name:
          type: string
Output · typescript
export interface User {
  id: string;
  email: string;
  name?: string;
}
With Zod runtime validation
Input · yaml
components:
  schemas:
    Post:
      type: object
      required: [id, title]
      properties:
        id:
          type: string
          format: uuid
        title:
          type: string
        body:
          type: string
Output · typescript
import { z } from 'zod';

export const PostSchema = z.object({
  id: z.string().uuid(),
  title: z.string(),
  body: z.string().optional(),
});
export type Post = z.infer<typeof PostSchema>;
Operation with TanStack Query hook
Input · yaml
paths:
  /users/{id}:
    get:
      operationId: getUser
      parameters:
        - in: path
          name: id
          required: true
          schema: { type: string }
      responses:
        '200':
          content:
            application/json:
              schema: { $ref: '#/components/schemas/User' }
Output · typescript
export function useGetUser(id: string) {
  return useQuery({
    queryKey: ['getUser', id],
    queryFn: () => request<User>(`/users/${id}`),
  });
}

Frequently asked questions

Yes. There's no sign-up, no rate limit, and no usage cap. The whole conversion runs in your browser using JavaScript, so we never see your spec.