MT
My Toolbox

JSON to TypeScript Converter — Generate Interfaces from API Responses

Paste a JSON sample and get TypeScript interfaces or type aliases with full nested object and array inference. No signup, no server — runs entirely in your browser.

JSON Input
TypeScript Output

Why Generate Types from JSON?

TypeScript's power comes from its type system, but manually writing interfaces for API responses is tedious and error-prone. A single typo in a field name creates a type that doesn't match reality, and TypeScript won't save you from runtime errors caused by wrong types.

This tool takes a real JSON sample — from your API, a database export, or documentation — and generates accurate TypeScript interfaces that match the actual data shape. Nested objects become separate named interfaces. Arrays get proper item types. Nullable fields are detected.

The generated code is ready to paste into your project. Use it as a starting point, then refine: mark optional fields, add JSDoc comments, or adjust type names to match your conventions.

How to Use

  1. Paste or type a JSON sample into the input area. A sample is pre-loaded for demo.
  2. Set the root type name (defaults to "Root"). Use something meaningful like "UserResponse" or "OrderData".
  3. Toggle "Use type instead of interface" if you prefer type aliases.
  4. Toggle "Mark fields optional" to add ? to all properties (useful for partial responses).
  5. The TypeScript output updates instantly. Click Copy to grab it.

When You Need This

Typing API responses

Hit your API endpoint, copy the JSON response, paste it here. You get a type-safe interface in seconds instead of manually writing one field at a time.

Bootstrapping a new project

Starting a new frontend that consumes an existing API? Generate all your response types from sample data before writing a single component.

Migrating JavaScript to TypeScript

You have working JS code with console.log outputs showing data shapes. Paste those outputs here to generate the types you need for migration.

Documentation and code reviews

Generate interfaces from API documentation examples to verify your hand-written types match the actual contract.

Tips

1.

Use representative samples

Paste a response that includes all possible fields. If some fields only appear conditionally, combine multiple responses or mark fields as optional after generation.

2.

Name your root type meaningfully

Don't leave it as "Root". Use names like "UserProfile", "OrderListResponse", or "ConfigPayload" — your future self will thank you.

3.

Review array types carefully

If your array has mixed types (objects with different shapes), the generator creates a union. This might mean your data has inconsistencies worth investigating.

4.

Generated types are a starting point

Add JSDoc comments, mark truly optional fields, and consider using branded types or enums for values like status codes. The generator gives you structure; you add semantics.

Examples

Simple API response

A flat user object with primitives and an array.

Input

{"id":1,"name":"Jane","email":"jane@example.com","roles":["admin","editor"]}

Output

export interface User {
  id: number;
  name: string;
  email: string;
  roles: Array<string>;
}

Nested object

A response with a nested profile object generates a separate interface.

Input

{"id":1,"profile":{"bio":"Engineer","avatar":"https://example.com/img.jpg"}}

Output

export interface User {
  id: number;
  profile: UserProfile;
}

export interface UserProfile {
  bio: string;
  avatar: string;
}

Limitations

  • Infers types from a single JSON sample. If your API returns different shapes conditionally, the generated types may not cover all cases.
  • Cannot generate discriminated unions — if an array has mixed object shapes, it merges them into one interface with all optional fields.
  • Does not support generating Zod schemas, io-ts codecs, or other runtime validation libraries. Output is TypeScript interfaces only.
  • Deeply nested JSON (>15 levels) may produce very verbose type hierarchies. Consider flattening your data model.

Features

  • Instant type generation as you edit JSON
  • Nested objects become named interfaces automatically
  • Array item type inference with union support
  • Toggle between interface and type alias output
  • Optional fields mode for partial/nullable data
  • Configurable root type name

FAQ

Does this handle arrays of objects?

Yes. If your JSON contains an array of objects, the tool infers the item type from the first element and generates a named interface for it.

What about null values?

Null values are typed as "null". If a field can be either a string or null, you'll want to manually change the generated type to "string | null" after reviewing.

Can I generate from JSON Schema instead?

This tool works from JSON samples (actual data), not JSON Schema definitions. For Schema-to-TypeScript conversion, look at tools like json-schema-to-typescript on npm.

Is the generated code production-ready?

It's a solid starting point. You'll typically want to add JSDoc comments, mark optional fields, and rename generated nested types to match your naming conventions.

Does this send my data anywhere?

No. The conversion runs entirely in your browser using local JavaScript. No data is transmitted. Safe for internal API responses and proprietary data structures.

Content last reviewed: June 2026

Your Privacy

All type generation happens entirely in your browser. No data is uploaded to any server. Your JSON data and generated types never leave your device.

Tips & Related Workflows