How do I convert JSON to a TypeScript interface?

Paste a JSON sample, name the root, and copy the generated interfaces. Conversion runs in your browser. Nested objects become named interfaces, arrays are typed from every element, and keys missing across array items are marked optional with ?.

What is the difference between optional (?) and nullable (| null)?

Optional means the key was absent on some array items. Nullable means the key was present and the value was JSON null. email?: string allows omitting the field. note: string | null requires the key. This converter does not collapse them into email?: string | null unless the sample actually showed both.

Should I emit interface or type alias?

Use interface for object shapes you may extend or merge across files. Use type alias for unions, intersections, and mapped types. For a typical API response either works; this page defaults to interface because that is the common TypeScript style for JSON models.

Why is a field unknown[] or Record ?

Empty arrays have no elements to inspect, so the fallback is unknown[]. Empty objects have no keys, so the fallback is Record . Paste a populated example to get a concrete element type or nested interface.

Does this replace quicktype?

No. quicktype.io owns multi-language codegen and runtime validators. This page is a private, client-side JSON to TypeScript interface converter for a pasted payload - no install, no account, and a report that separates optional keys from JSON null.

No. Parsing and inference run only in your browser. Safe for internal API responses, tokens, and PII. Verify in DevTools Network: converting does not send a request.

Can I generate types from a JSON array?

Yes, and you should when keys vary. An array of records is merged into one interface. Missing keys become optional. If you name the root Users, the output is interface User plus type Users = User[]. If you name it User, type the payload as User[].

Developer Tools

JSON to TypeScript Interface Converter

Generate TypeScript interfaces from a JSON sample in your browser - no account, no upload, no codegen CLI.

Try a sample

JSON sample

Conversion runs in your browser. The JSON never leaves this device.

Root name

PascalCase name for the top interface. A JSON array named Users emits User plus type Users = User[].

Emit as

interface is the usual API-response shape and supports declaration merging. type aliases fit unions and mapped types.

Interfaces

Optional keys

Nullable keys

Unions

? means the key was missing on some array items. | null means the sample contained JSON null. They are not the same.

Inference notes

The JSON root is an array. Type the payload as Root[] (or the list alias if you used a plural name).

User.lastLogin was only ever null. Add a real value in the sample to infer the non-null type.

Inferred property report
Interface	Key	Type	Flags
Address	city	string	required
Address	postcode	string	optional ?
User	id	number	required
User	name	string	required
User	role	string	required
User	email	string	optional ?
User	address	Address	required
User	lastLogin	null	optional ? \| null
User	tags	string[]	optional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

About JSON to TypeScript Interface Converter

Generate TypeScript interfaces from a JSON sample in your browser - no account, no upload, no codegen CLI. Paste an API response or, better, an array of records. Nested objects become named interfaces, arrays are typed from every element (not only the first), and identical shapes are de-duplicated. The walker does not collapse missing keys and JSON null: a key omitted on some items is optional (`?`); a key that is present but null is `T | null`. Copy the result into a `.ts` file or download it. Pair it with the JSON Minifier if the payload arrived minified, or the JSONPath Tester to inspect one field first.

How to Use JSON to TypeScript Interface Converter

Paste JSON (an array of records infers optional keys more accurately than a single object). Load a sample if you want to see optional vs nullable first.
Set the root name (User, Order, ApiResponse). Choose interface (default) or type alias.
Read the inference report: declaration count, optional keys, nullable keys, and unions. Warnings flag empty arrays, empty objects, all-null fields, and quoted keys.
Copy the TypeScript or download a .ts file. Drop it into types/ and annotate `fetch` / TanStack Query with the root name.
Nothing is sent to a server. Invalid JSON reports a line and column.

JSON to TypeScript Interface Converter Examples

Optional key from an array of records

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] becomes Order with gift?: boolean. The key is optional because the first item omitted it - not because the value was null.

Nullable vs optional

Two users where email is missing on one row and note is null on the other emit email?: string and note: string | null. Missing keys and JSON null stay distinct, which most converters collapse.

Nested named interfaces

{"user":{"address":{"city":"London"}}} emits Address, then User, then Root. Nested objects are named from their keys in PascalCase so you can import Address on its own.

Quoted keys and empty containers

{"content-type":"application/json","items":[],"meta":{}} quotes content-type, types items as unknown[], and types meta as Record<string, unknown>. Warnings tell you to paste a richer sample.

interface vs type alias

Leave interface on for API response shapes (declaration merging, slightly better errors). Switch to type alias when the file will hold unions or mapped types. Runtime output is identical either way.

Common Use Cases

Typing fetch() or axios responses in a React, Vue, or Next.js app
Generating TanStack Query / SWR generics from a real payload
Turning a webhook body (Stripe, GitHub, Slack) into a typed event
Drafting types for a fixture before the OpenAPI spec exists
Converting a JSON config blob into editor-complete TypeScript

Frequently Asked Questions about JSON to TypeScript Interface Converter

How do I convert JSON to a TypeScript interface?: Paste a JSON sample, name the root, and copy the generated interfaces. Conversion runs in your browser. Nested objects become named interfaces, arrays are typed from every element, and keys missing across array items are marked optional with ?.
What is the difference between optional (?) and nullable (| null)?: Optional means the key was absent on some array items. Nullable means the key was present and the value was JSON null. email?: string allows omitting the field. note: string | null requires the key. This converter does not collapse them into email?: string | null unless the sample actually showed both.
Should I emit interface or type alias?: Use interface for object shapes you may extend or merge across files. Use type alias for unions, intersections, and mapped types. For a typical API response either works; this page defaults to interface because that is the common TypeScript style for JSON models.
Why is a field unknown[] or Record<string, unknown>?: Empty arrays have no elements to inspect, so the fallback is unknown[]. Empty objects have no keys, so the fallback is Record<string, unknown>. Paste a populated example to get a concrete element type or nested interface.
Does this replace quicktype?: No. quicktype.io owns multi-language codegen and runtime validators. This page is a private, client-side JSON to TypeScript interface converter for a pasted payload - no install, no account, and a report that separates optional keys from JSON null.
Is my JSON uploaded?: No. Parsing and inference run only in your browser. Safe for internal API responses, tokens, and PII. Verify in DevTools Network: converting does not send a request.
Can I generate types from a JSON array?: Yes, and you should when keys vary. An array of records is merged into one interface. Missing keys become optional. If you name the root Users, the output is interface User plus type Users = User[]. If you name it User, type the payload as User[].

JSON Minifier & Formatter

Free online JSON minifier and formatter. Minify JSON to shrink payloads or beautify (pretty-print) JSON with 2-space indentation. Validates as you go - no upload required.

JSONPath Tester

Test JSONPath online in your browser. Extract a field from JSON, try a filter example, and copy normalized paths - nothing is uploaded.

JSON Schema Generator

Free JSON Schema generator in your browser. Paste sample JSON, infer types and formats, and copy a Draft-07 or 2020-12 schema. Nothing is uploaded.

JSON to CSV Converter

Convert JSON to CSV and CSV to JSON in your browser. Flatten nested objects, unflatten dotted keys on the way back, NDJSON, Excel EU preset, RFC 4180. Nothing is uploaded.