OpenAPI to TypeScript & React Query Hooks Generator

100% Client-Side Private — Zero Server Uploads

Convert OpenAPI 3.0 & Swagger 2.0 (JSON & YAML) specifications into TypeScript interfaces, typed API clients, and TanStack React Query hooks.

🔒 100% Client-Side: All data is processed locally in your browser and never leaves your device (Zero Server Uploads).

E-E-A-T Security Proof →

Interactive Workspace

OpenAPI / Swagger Spec (JSON or YAML)

Upload File

openapi: 3.0.3
info:
  title: Petstore JoyTools API
  description: Sample OpenAPI specification for testing TypeScript generation.
  version: 1.0.0
paths:
  /pets:
    get:
      summary: List all pets
      operationId: listPets
      parameters:
        - name: limit
          in: query
          description: How many items to return
          required: false
          schema:
            type: integer
      responses:
        '200':
          description: A paged array of pets
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Pet'
    post:
      summary: Create a pet
      operationId: createPet
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreatePetInput'
      responses:
        '201':
          description: Null response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Pet'
  /pets/{petId}:
    get:
      summary: Info for a specific pet
      operationId: showPetById
      parameters:
        - name: petId
          in: path
          required: true
          description: The id of the pet to retrieve
          schema:
            type: string
      responses:
        '200':
          description: Expected response to a valid request
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Pet'
components:
  schemas:
    Pet:
      type: object
      required:
        - id
        - name
      properties:
        id:
          type: integer
          format: int64
          description: Unique identifier for pet
        name:
          type: string
          description: Name of pet
        tag:
          type: string
          description: Category tag
        status:
          type: string
          enum:
            - available
            - pending
            - sold
    CreatePetInput:
      type: object
      required:
        - name
      properties:
        name:
          type: string
        tag:
          type: string

Generated TypeScript Code2 Schemas • 3 Endpoints

/**
 * AUTO-GENERATED BY JOYTOOLS OPENAPI TO TYPESCRIPT CONVERTER
 * Spec Title: Petstore JoyTools API
 * Spec Version: 1.0.0
 * Generated: 2026-10-29T07:04:04.318Z
 */

import { useQuery, useMutation, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';

// ==========================================
// 1. DATA MODELS & SCHEMAS
// ==========================================

export interface Pet {
  /** Unique identifier for pet */
  id: number;
  /** Name of pet */
  name: string;
  /** Category tag */
  tag?: string;
  status?: 'available' | 'pending' | 'sold';
}

export interface CreatePetInput {
  name: string;
  tag?: string;
}

// ==========================================
// 2. API ENDPOINTS & HOOKS
// ==========================================

export interface ListPetsParams {
  limit?: number;
}
/** List all pets */
export async function listPets(params: ListPetsParams): Promise<Pet[]> {
  const response = await fetch((() => { const u = new URL(`/api/pets`, window.location.origin); if (params.limit !== undefined) u.searchParams.append('limit', String(params.limit)); return u.toString(); })(), {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
  });
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json();
}

export function useListPets(
  params: ListPetsParams, options?: Omit<UseQueryOptions<Pet[], Error>, 'queryKey' | 'queryFn'>
) {
  return useQuery<Pet[], Error>({
    queryKey: ['listPets', params],
    queryFn: () => listPets(params),
    ...options,
  });
}

export type CreatePetPayload = CreatePetInput;

/** Create a pet */
export async function createPet(body: CreatePetPayload): Promise<Pet> {
  const response = await fetch(`/api/pets`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json();
}

export function useCreatePet(
  options?: UseMutationOptions<Pet, Error, CreatePetPayload>
) {
  return useMutation<Pet, Error, CreatePetPayload>({
    mutationFn: (vars) => createPet(vars),
    ...options,
  });
}

export interface ShowPetByIdParams {
  petId: string;
}
/** Info for a specific pet */
export async function showPetById(params: ShowPetByIdParams): Promise<Pet> {
  const response = await fetch(`/api/pets/${params.petId}`, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
  });
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json();
}

export function useShowPetById(
  params: ShowPetByIdParams, options?: Omit<UseQueryOptions<Pet, Error>, 'queryKey' | 'queryFn'>
) {
  return useQuery<Pet, Error>({
    queryKey: ['showPetById', params],
    queryFn: () => showPetById(params),
    ...options,
  });
}

Share & Developer Embed

How do I use OpenAPI to TypeScript & React Query Hooks Generator?

Paste your OpenAPI 3.0/3.1 or Swagger 2.0 specification (JSON or YAML) into the left editor, or click 'Load Sample' to load a Petstore spec.

Configure generation flags (`export` keyword, optional `?` properties, `readonly` modifiers, and endpoint path summary comments).

Copy the compiled TypeScript interfaces and enum types directly into your frontend API client.

What features does OpenAPI to TypeScript & React Query Hooks Generator offer?

Supports OpenAPI v3.0 / v3.1 and Swagger 2.0 specs in both JSON and YAML formats

Generates TypeScript interfaces and type aliases for data schemas

Generates type-safe API client fetcher functions with path & query parameter interpolation

Generates TanStack React Query (`useQuery` & `useMutation`) hooks automatically

100% client-side local browser execution — zero data transmission

OpenAPI 3.0 / 3.1 Schema Object to TypeScript AST Mapping

The compiler resolves `components.schemas` (OpenAPI 3.x) and `definitions` (Swagger 2.0), including `$ref` pointers, `allOf`/`oneOf`/`anyOf` compositions, and `nullable` flags.

OpenAPI Schema Constructs to TypeScript Output Reference
OpenAPI 3.x Construct	Schema Definition	Compiled TypeScript Output	Notes
$ref Pointer	$ref: '#/components/schemas/User'	User	Resolves local schema identifier
String Enum	type: string, enum: [ACTIVE, PENDING]	'ACTIVE' \| 'PENDING'	Emits strict literal union
Composition (oneOf/anyOf)	oneOf: [{ $ref: A }, { $ref: B }]	A \| B	Union type expression
Composition (allOf)	allOf: [{ $ref: Base }, { type: object }]	Base & { ... }	Intersection type expression

Frequently Asked Questions about OpenAPI to TypeScript & React Query Hooks Generator

Does this compiler support both OpenAPI 3.x (`components.schemas`) and Swagger 2.0 (`definitions`)?

Yes. The parser automatically detects the specification root (`openapi: 3.x.x` vs `swagger: '2.0'`) and extracts schemas from either `components.schemas` or `definitions`, resolving internal `$ref` pointers accordingly.

How are `required` arrays vs optional properties handled in OpenAPI schemas?

In OpenAPI, object properties are optional by default unless listed in the parent object's `required: [...]` array. The compiler marks any property omitted from `required` with the TypeScript `?` optional modifier.

How does the converter handle `nullable: true` (OpenAPI 3.0) and `type: ['string', 'null']` (OpenAPI 3.1)?

Both OpenAPI 3.0 `nullable: true` attributes and OpenAPI 3.1 JSON Schema type arrays (`['string', 'null']`) are compiled into explicit TypeScript nullable unions (`string | null`).

Can I paste YAML OpenAPI specs as well as JSON?

Yes. The input editor parses both YAML 1.2 and JSON specifications locally in your browser using `js-yaml` before walking the OpenAPI schema tree.

Explore Related Developer Tools

Browse all Developer tools

Developer

JSON to TypeScript & Zod Schema Generator

Convert JSON objects into typed TypeScript interface definitions or Zod validation schemas instantly.

Developer

cURL to Python Requests Converter

Convert cURL commands with Bearer tokens, custom headers, and JSON payloads into clean Python requests code locally in your browser.

Developer

cURL to JavaScript Fetch Converter

Transform cURL commands into modern JavaScript and Node.js 20+ Fetch API calls with typed headers and JSON.stringify payloads.

Developer

cURL to Axios Request Converter

Convert cURL commands into Axios request config objects (method, url, headers, data) for Node.js and TypeScript projects.

Developer

CSV to JSON Converter

Convert CSV spreadsheets and delimited text into structured JSON arrays with auto-delimiter and dynamic data type detection.

Developer

JSON to CSV Converter

Convert JSON object arrays into RFC 4180 compliant CSV spreadsheets ready for Excel, Google Sheets, and SQL imports.