JSON to TypeScript

About this tool

When you call a new API endpoint you get back a JSON object and a question: what shape is this data? Writing TypeScript interfaces by hand for every nested field is slow and error-prone. This tool reads a JSON sample and generates export interface declarations for it. Nested objects become their own interfaces, named by joining the parent name and the key (a profile key under User becomes UserProfile). Arrays are typed as T[] when items share a type, as a union such as (number | string)[] when they are mixed, and as unknown[] when empty. If the root is an array of objects, the objects are merged into one interface and keys missing from some objects are marked optional with ?. The output ends with an export type line for the root name; for a single-object root that line duplicates the interface name and should be deleted. The root type name is configurable. Everything runs in the browser — production API payloads and auth tokens never leave your tab.

Why use it

• Auto Interface Generation: Produces export interface declarations from any JSON sample. Each key becomes a typed property, eliminating the tedious and error-prone process of writing interface bodies by hand for every API response your application consumes.

• Nested Type Inference: Nested JSON objects are extracted into their own interfaces with cross-references, so a deep API response becomes a set of composable interfaces rather than one monolithic blob.

• Array Item Types: Arrays are typed as T[] when all items share the same type, or as a union such as (number | string)[] when elements differ, instead of falling back to any[].

• Configurable Root Name: The top-level type name defaults to Root but can be set to anything that matches your codebase conventions. Nested interfaces are named by joining the parent name and the key.

• Optional Keys from Arrays of Records: When the root JSON is an array of objects, every object is merged into one interface and keys missing from some records get the ? modifier.

• Local Only: The entire generation process runs client-side in the browser. You can safely paste production API responses containing PII, auth tokens, or business-sensitive data without any of it being transmitted to a server.

How to use

1. Paste a representative JSON sample — the most complete response you have — into the JSON Input box
2. Set the Root Type Name to match your domain model (e.g. User, ApiResponse, OrderDetail)
3. Click Convert to produce TypeScript interface declarations (Beautify reformats the input JSON first if you want to read it)
4. Review null-typed fields and nested array interfaces, and replace them with the real types from the API contract
5. Copy the generated interfaces into your types.ts or a dedicated file in your project
6. Add stricter constraints by hand — narrow unions, add literal types, and layer Zod schemas where runtime validation is needed

When it helps

• You have integrated a new third-party API and need typed interfaces before you can write any consuming code
• You are refactoring a JavaScript codebase to TypeScript and need to type existing API responses quickly
• An API contract changed and you want to generate fresh interfaces to diff against your committed types
• You are writing a mock server and need the response types to match the client's expectations exactly
• You received a large JSON fixture from a colleague and need to understand its shape without reading every key
• You want a starting scaffold for Zod or io-ts schemas before adding validation refinements manually

Examples

[{"id":1,"name":"Alice","tags":["admin"]},{"id":2,"name":"Bob","manager":null}]  (Root Type Name: User)

export interface UserItem {
  id: number;
  name: string;
  tags?: string[];
  manager?: null;
}

export type User = UserItem[];

[{"id":1,"profile":{"email":"a@x.com","age":30}}]  (Root Type Name: User)

export interface UserItem {
  id: number;
  profile: UserItemProfile;
}

export interface UserItemProfile {
  email: string;
  age: number;
}

export type User = UserItem[];

{"id":1,"name":"Alice","active":true}  (Root Type Name: User)

export interface User {
  id: number;
  name: string;
  active: boolean;
}

export type User = User;

Tips

• Run the generator on the longest, most complete sample you have — a minimal happy-path response hides optional fields and union types.
• Treat generated interfaces as a scaffold: narrow union types, add string literal types, and replace null and unknown[] entries before committing.
• For production type-safety, layer a Zod schema on top of the generated interfaces so invalid API responses are caught at runtime, not just at compile time.
• Re-run after API changes and diff the output against your committed types to spot breaking contract changes before they reach production.
• Field names with hyphens like x-request-id become quoted properties in TypeScript — consider a transform layer to convert them to camelCase in your application boundary.

Frequently Asked Questions

Glossary

Interface

A TypeScript construct that describes the shape of an object by listing its property names and types. Interfaces support declaration merging and are the idiomatic way to type API response objects.

Type alias

A TypeScript keyword (type) that names any type expression, including unions, intersections, primitives, and tuples. More flexible than interface but does not support declaration merging.

Union type

A TypeScript type formed with | that allows a value to be one of several types. For example, string | number means the value can be either a string or a number.

Optional property

A property marked with ? in a TypeScript interface, meaning the key may be absent from an object. Accessing it without a null check produces a TypeScript error when strict mode is enabled.

Generic

A TypeScript feature that lets you write type-safe code that works with multiple types. Array<T> is a generic type where T is a placeholder filled in at usage time.

Type inference

TypeScript's ability to automatically determine the type of a value from its usage without an explicit annotation. The JSON-to-TypeScript generator uses inference logic to deduce field types from sample values.