Class name:

OpenAPI Specification (JSON or YAML)

Generated TypeScript Client

What is OpenAPI to TypeScript Axios Client Generator?

Axios remains one of the most popular HTTP clients for TypeScript and JavaScript projects, offering interceptors, automatic JSON transformation, and broad browser support. However, building a typed API client from an OpenAPI specification by hand is time-consuming: every endpoint needs a method with the correct path parameters, query parameters, request body type, and response type. This tool automates the entire process by reading your OpenAPI 3.0/3.1 or Swagger 2.0 specification and producing a fully typed Axios client class. It generates three files: types.ts contains TypeScript interfaces for all schemas and request/response types; api.ts contains the client class with typed methods for every endpoint; and index.ts re-exports everything for clean imports. The client handles path parameter substitution, query parameter serialization, and request body construction automatically.

How to Use

Optionally customize the API client class name in the settings bar (default is ApiClient)
Paste your OpenAPI or Swagger specification — both JSON and YAML formats are accepted — into the left panel
Click "Generate Client" to parse the spec and produce TypeScript interfaces plus the Axios client class
Use the file tabs (types.ts, api.ts, index.ts) to inspect each generated file separately
Copy all three files into your project, install axios with your package manager, and import the client class
Instantiate the client with your base URL and start calling typed methods: const api = new ApiClient("https://api.example.com")

Why Use This Tool?

Every endpoint method is fully typed with request body, query parameters, and response shape — compile-time errors catch API mismatches before runtime

Resolves $ref references automatically, so schemas defined in components/schemas become first-class TypeScript interfaces

Supports both OpenAPI 3.x and Swagger 2.0, handling the different schema locations (components/schemas vs definitions) transparently

Generates a clean Axios client class that you can extend with interceptors, retry logic, or custom error handling

Produces separate files for types, client, and barrel exports — matching the structure of production TypeScript projects

Tips & Best Practices

Define operationId on every endpoint in your spec — the tool uses it for method names, falling back to method + path which is less readable
After generating, add Axios interceptors to the underlying instance via client.getClient() for authentication token refresh or error logging
For large APIs with dozens of endpoints, consider splitting the spec by tag and generating separate client classes for each domain
The generated client accepts AxiosRequestConfig as the last parameter on every method, so you can pass custom headers or timeout overrides per request

Frequently Asked Questions

How are OpenAPI schema types mapped to TypeScript?

string → string, integer/number → number, boolean → boolean, array → T[], object with properties → interface, $ref → referenced type name, enum → union of string literals. Additional properties (free-form objects) become Record<string, unknown>.

When should I NOT use this generator?

If you need runtime validation (not just type checking), consider tools that generate Zod or io-ts schemas instead. This generator produces TypeScript types that are erased at runtime. It is also not ideal for APIs that use unusual content types like multipart/form-data or protobuf-encoded bodies.

Can I use YAML format for my spec?

Yes. The tool accepts both JSON and YAML. It includes a built-in YAML parser that handles basic OpenAPI specs. For complex YAML with anchors and aliases, consider converting to JSON first using our YAML to JSON converter.

Is my API specification sent to a server?

No. All parsing and code generation runs entirely in your browser. Your OpenAPI specification never leaves your device, making this safe for internal or proprietary API definitions.

How do I add authentication to the generated client?

The client constructor accepts an AxiosRequestConfig object. Pass default headers there: new ApiClient("https://api.example.com", { headers: { Authorization: "Bearer token" } }). You can also call client.getClient().interceptors.request.use() to add dynamic token logic.

What happens with $ref references?

All $ref references pointing to components/schemas (OpenAPI 3.x) or definitions (Swagger 2.0) are resolved. The referenced schema becomes a TypeScript interface in types.ts, and the method signatures reference it by name rather than inlining the structure.

Real-world Examples

Pet Store API client with typed CRUD methods

A standard Pet Store API with list, create, get, and delete operations. The generated client provides a typed method for each endpoint with proper parameter and response types.

Input

{
  "openapi": "3.0.0",
  "paths": {
    "/pets": {
      "get": { "operationId": "listPets", "parameters": [{"name":"limit","in":"query","schema":{"type":"integer"}}], "responses": {"200":{"content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/Pet"}}}}}} },
      "post": { "operationId": "createPet", "requestBody":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/PetInput"}}}}, "responses": {"201":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/Pet"}}}}} }
    }
  },
  "components": { "schemas": { "Pet": {"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"}}}, "PetInput": {"type":"object","properties":{"name":{"type":"string"}},"required":["name"]} } }
}

Output

// types.ts
export interface Pet { id?: string; name?: string; }
export interface PetInput { name: string; }

// api.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

export class ApiClient {
  private client: AxiosInstance;
  constructor(baseURL: string, config?: AxiosRequestConfig) {
    this.client = axios.create({ baseURL, ...config });
  }
  async listPets(params?: { limit?: number }, config?: AxiosRequestConfig): Promise<AxiosResponse<Pet[]>> {
    return this.client.get<Pet[]>('/pets', { params, ...config });
  }
  async createPet(data: PetInput, config?: AxiosRequestConfig): Promise<AxiosResponse<Pet>> {
    return this.client.post<Pet>('/pets', data, config);
  }
}

User management API with path parameters

An API where endpoints include path parameters like /users/{id}. The generated client substitutes path parameters using template literals and types them as required arguments.