$json-to-typescript
Paste any JSON sample and get typed TypeScript interfaces. Fields that are missing from some array entries are marked optional. Nested objects become their own interfaces. Everything runs in your browser.
export interface Root {
id: number;
name: string;
active: boolean;
tags: string[];
addresses: Address[];
meta: Meta;
}
export interface Address {
city: string;
zip: string;
country?: string;
}
export interface Meta {
lastLogin: string;
invites: null;
}
How to generate TypeScript types from JSON
Copy a response from an API — a single object or a list of them — and this tool infers a usable TypeScript type tree in one step. It walks every nested object, merges the shapes it finds inside arrays, and marks a field as optional whenever it is missing from at least one of the sibling entries. Each distinct object shape is extracted into its own named interface so you get reusable types, not one monster inline definition.
- Paste a real sample. Drop in a full JSON response — ideally one that contains every field the API returns in its happy path. The richer the sample, the more useful the inferred types.
- Tweak the root name. It is used for the top-level interface plus any nested types that need a fallback name. Array items inherit the singular of the field they live under: users → User.
- Pick a style. Choose interface for extendable shapes or type aliases for union-friendly declarations. Toggle readonly, sorted keys, or Array<T> syntax as needed.
- Copy or download. The result is yours — drop it into a types file, refine the inferred names, and ship. Nothing leaves your browser.
How optional fields are inferred
When an array contains objects, every key is tallied across the entries. A key that is missing from at least one entry is marked with ?. If a key is always present but is sometimes null, its type becomes T | null. This matches how most REST and JSON:API endpoints signal "absent vs explicitly empty".
When to prefer this over hand-written types
- First contact with a third-party API — start from a real payload, then trim.
- Quick inspection of a webhook body before writing a Zod or io-ts schema.
- Scaffolding fixtures and test doubles from a production response.
- Unblocking a frontend while the backend contract is still evolving.
Hand-authored types still win for shared domain models — they can encode invariants the sample can't (discriminated unions, branded IDs, literal string enums). Treat the generator output as a starting point, not the final answer.
// how-to
How to convert JSON to TypeScript interfaces
Paste a JSON sample to generate TypeScript interfaces with optional fields inferred from array entries, nested shapes extracted into their own named types, and toggles for interface vs type alias, readonly, exports, and array syntax. Everything runs in your browser.
Paste a realistic JSON sample
Drop in a full response or example payload. The more complete the sample, the more accurate the inferred types will be.
Set the root name
Rename the top-level interface to match the domain object (User, Invoice, WebhookEvent). Nested object fields inherit PascalCase names from their key; array items are singularized.
Pick a style
Choose between interface or type alias, toggle readonly fields, sort keys, swap T[] for Array<T>, and decide whether unknown unknowns should be any or unknown.
Copy or download
Hit Copy to grab the declaration or Download to save a .ts file. Everything is generated locally — your payload never leaves the browser.
// faq
- ? How does it decide which fields are optional?
- When an array contains objects, each key is tallied across every entry. A key that is missing from any entry is marked optional with ?. A key that is always present but sometimes null stays required but gets a T | null type.
- ? Can it handle arrays with mixed element types?
- Yes. Primitives are merged into a union ((string | number)[]), objects inside the array are merged into one shape with optional fields, and mixed shapes compose: ({ id: number } | string)[] is a valid output.
- ? Why did my key get wrapped in quotes?
- Keys that are not valid JavaScript identifiers (hyphens, leading digits, TypeScript reserved words) are emitted as string literals so the interface still compiles. Rename them with a type if you need an alias.
- ? Is the generated type a replacement for runtime validation?
- No. TypeScript types disappear at runtime. If the payload comes from a network boundary you cannot fully trust, pair the generated types with a validator such as Zod, Valibot, or io-ts — the generator gives you a head start, not a guarantee.
- ? Does my JSON leave the browser?
- No. Parsing, type inference, and serialization all happen locally. There is no network request, no logging, and no analytics tied to your sample.