What is OpenAPI to TypeScript SDK Generator?
Modern web applications increasingly run in environments where bundle size matters — edge functions, serverless lambdas, and browser extensions all benefit from zero-dependency HTTP clients. This tool generates a fully typed TypeScript SDK from your OpenAPI 3.0/3.1 or Swagger 2.0 specification using the native fetch API, which means no external HTTP library is required. It produces three files: types.ts with TypeScript interfaces for all schemas, sdk.ts with a client class that includes a generic request method handling query parameters, JSON serialization, timeout via AbortController, and error handling, and index.ts for clean barrel exports. Every endpoint in your spec becomes a typed method on the client class, with path parameter substitution, query parameter collection, and request body construction all handled automatically.
How to Use
- Optionally customize the SDK 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 SDK" to parse the spec and produce TypeScript interfaces plus the fetch-based client class
- Use the file tabs (types.ts, sdk.ts, index.ts) to inspect each generated file
- Copy all three files into your project and import the client class — no npm dependencies needed
- Instantiate with a config object: const api = new ApiClient({ baseUrl: "https://api.example.com" })
Why Use This Tool?
Tips & Best Practices
- The generated SDK works in browser, Node.js 18+, Cloudflare Workers, Deno, and Bun — any runtime with fetch support
- Use the operationId field in your spec for readable method names; without it, names are derived from the HTTP method and path
- Pass custom headers via the config object for authentication: { baseUrl: "...", headers: { Authorization: "Bearer token" } }
- Extend the generated class to add retry logic, request deduplication, or custom error transformation
Frequently Asked Questions
How are OpenAPI 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. The null type maps to null, and additionalProperties objects become Record<string, unknown>.
When should I NOT use this generator?
If you need runtime validation (not just compile-time types), consider generating Zod schemas instead. This tool is also not ideal if your project requires Axios-specific features like request/response interceptors, automatic retry, or XSRF protection — use the OpenAPI to Axios Client generator in that case.
Why use fetch instead of Axios?
Fetch is a native web standard available in all modern browsers and Node.js 18+. It requires no dependencies, resulting in smaller bundle sizes. For serverless and edge environments, the lighter footprint can significantly reduce cold start times.
How do I add authentication?
Pass headers in the config: new ApiClient({ baseUrl: "...", headers: { Authorization: "Bearer token" } }). You can also call setHeaders() at runtime to update tokens after authentication, or extend the class to add interceptor-like behavior.
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.
Does it support file uploads?
The generated SDK serializes request bodies as JSON. For multipart/form-data file uploads, you would need to modify the generated method to use FormData instead of JSON.stringify. This is a common customization point after generation.
Real-world Examples
Pet Store SDK with zero dependencies
A Pet Store API SDK that runs in any environment with fetch support. The generated client provides typed methods for listing, creating, updating, and deleting pets with no external dependencies.
{
"openapi": "3.0.0",
"info": { "title": "Pet Store", "version": "1.0.0" },
"servers": [{ "url": "https://api.petstore.com/v1" }],
"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/CreatePetInput"}}}}, "responses": {"201":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/Pet"}}}}} }
}
},
"components": { "schemas": { "Pet": {"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"}}}, "CreatePetInput": {"type":"object","properties":{"name":{"type":"string"}},"required":["name"]} } }
}// sdk.ts (excerpt)
export class ApiClient {
private config: SdkConfig;
async listPets(query?: { limit?: number }): Promise<Pet[]> {
return this.request<Pet[]>('get', '/pets', { query });
}
async createPet(body: CreatePetInput): Promise<Pet> {
return this.request<Pet>('post', '/pets', { body });
}
}
// Usage:
// const api = new ApiClient({ baseUrl: "https://api.petstore.com/v1" });
// const pets = await api.listPets({ limit: 10 });
// const newPet = await api.createPet({ name: "Buddy" });Edge-compatible API client for a SaaS product
A SaaS API client deployed to Cloudflare Workers where bundle size is critical. The fetch-based SDK has zero dependencies and includes timeout support via AbortController.
{
"openapi": "3.0.0",
"info": { "title": "SaaS API", "version": "2.0.0" },
"servers": [{ "url": "https://api.saas.com/v2" }],
"paths": {
"/projects": {
"get": { "operationId": "listProjects", "responses": {"200":{"content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"}}}}}}}} }
}
}
}// Deployed to Cloudflare Workers:
import { ApiClient } from './generated';
export default {
async fetch(request: Request) {
const api = new ApiClient({
baseUrl: 'https://api.saas.com/v2',
headers: { Authorization: `Bearer ${env.API_KEY}` },
timeout: 5000,
});
const projects = await api.listProjects();
return Response.json(projects);
}
};