What version of OpenAPI / Swagger is supported?

JoyTools supports OpenAPI v3.0, v3.1, and Swagger 2.0 specifications in both JSON and YAML text or file uploads.

Is my API specification uploaded to any server?

No. All parsing and TypeScript code generation takes place entirely inside your web browser's memory. Your API schemas are 100% private.

Can I export the output as a .ts file?

Yes, click the '.ts File' button in the output toolbar to download the generated TypeScript file directly.

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 clean TypeScript interfaces, typed API clients, and TanStack React Query hooks instantly.

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-08-07T09:48:35.385Z
 */

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,
  });
}

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

Paste or upload your OpenAPI v3 or Swagger v2 document (JSON or YAML format).

Select your output preferences (Interfaces, Fetch Client, or TanStack React Query Hooks).

Copy or download the generated type-safe TypeScript code into your project.

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

Supports OpenAPI v3.0 / v3.1 and Swagger 2.0 (JSON and YAML)

Generates TypeScript interfaces and type aliases

Generates typed fetch API clients with path & query param interpolation

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

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

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

What OpenAPI versions are supported?

OpenAPI 3.0, 3.1, and Swagger 2.0 specifications in both JSON and YAML text formats.

Does it generate React Query hooks?

Yes, it automatically generates TanStack React Query (v5) `useQuery` hooks for GET operations and `useMutation` hooks for POST/PUT/DELETE/PATCH operations.

Explore Related Developer Tools

Developer

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 strings back to text. Supports Unicode UTF-8 and URL-Safe modes.

Developer

UUID Generator

Generate cryptographically secure v4 UUIDs in single or bulk batches with custom formatting.

Developer

Password Generator

Generate strong random passwords with custom length, character sets, and bit entropy meter.

OpenAPI to TypeScript & React Query Hooks Generator

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

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

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

What OpenAPI versions are supported?

Does it generate React Query hooks?

Explore Related Developer Tools

Base64 Encoder / Decoder

UUID Generator

Password Generator

Discover Vietnam Like a Local with Joydii