Skip to main content

JSON to TypeScript

Paste JSON and get TypeScript interfaces or types at once. Optional fields inferred from several samples. Runs in your browser; nothing is uploaded.

Paste JSON on the left. Add a second sample to find optional fields.

JSON input

Stays in your browser

TypeScript code

The generated code appears here.

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Free Online JSON to TypeScript Generator

Turn an API response into TypeScript types without typing them out. Paste one or more JSON samples and copy ready interfaces or type aliases. It gives developers a quick browser-based way to solve a focused json to typescript task before moving the result into a project.

How to generate TypeScript code from JSON

Paste a JSON object or an array of objects into the input box and press Generate. Choose interface or type, add readonly, and pick name?: T or name: T | undefined for optional fields. Fields missing from some samples become optional, and null values become T | null.

One input, every language

Your JSON stays in the box when you switch the language tabs, and the code is generated again at once. Each language also has its own page, so you can bookmark the one you use.

How types are worked out

  • Whole numbers and numbers with decimals are told apart.
  • Add more samples with Add sample: a key missing from some samples becomes optional, and null makes a type nullable.
  • Arrays of objects are merged into one type, and nested objects become their own types named after the key.
  • Keys that are not valid names in the language (such as first-name or 2fa) are renamed and mapped back, never rejected.

Worked example

The sample JSON in the box above, generated with the default options:

{
  "id": 1,
  "name": "Ada",
  "email": null,
  "tags": ["x"],
  "address": { "city": "Pune", "pin": "411001" },
  "createdAt": "2026-01-15T10:30:00Z"
}
export interface Root {
  id: number;
  name: string;
  email: string | null;
  tags: string[];
  address: Address;
  createdAt: string;
}

export interface Address {
  city: string;
  pin: string;
}

Common mistakes

  • A single sample cannot show which fields are optional. Paste two or three different responses for a realistic result.
  • A value that is always null gives no type information, so it is treated as a nullable string. Change it by hand if it is something else.
  • Numbers are typed from the samples: 1 and 1.0 look the same in JSON, so use a sample with decimals where you need a float.

Frequently asked questions

How are optional fields decided?
Add more than one sample. A key that is missing from some samples is marked optional, and a key that is null in some samples becomes nullable. With one sample every field is treated as required.
What happens to keys like "first-name"?
They are kept as quoted property names ("first-name": string), so the generated type matches the JSON exactly.
Does it check the code compiles?
The output is plain TypeScript with no imports, so it compiles as it is. Rename the root type to suit your project.
Is my JSON uploaded?
No. The types are worked out in your browser. Nothing you paste is sent to a server.
How do I use this json to typescript tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Formatters & Parsers

View all Formatters & Parsers tools →