JSON to TypeScript Types

Generate typed interfaces from a JSON sample, nested objects and arrays too.

Runs in your browser
JSON sample
Drop file to load it
EmptySaved locally
TypeScript
Ready
More options (3)
An empty array in the sample says nothing about its items.
Try an example:

How to use the JSON to TypeScript Types

  1. Paste a JSON sample on the left: a single object, or an array of objects as returned by an API.
  2. The TypeScript appears on the right. Nested objects get their own interfaces and every array gets one item type.
  3. Name the root type, choose interface or type alias output, and switch on readonly if the data must never be mutated.
  4. Copy the code into your project or save it as types.ts.

Examples

About this tool

Typing an API response by hand is slow and easy to get wrong. This generator reads a JSON sample and writes TypeScript declarations for it: one interface for the root, one for each nested object, and one shared type for the items of every array. Names come from the keys, so an orders list produces an Order interface and a shipping_address object becomes ShippingAddress.

The sample is treated as evidence rather than as the whole truth. When a list holds objects with different keys, their properties are merged and any key missing from some items is marked optional with a question mark. A value that is sometimes a number and sometimes a string becomes a union, null values appear as | null, and empty arrays are typed as unknown[] because nothing in the sample says what they will hold. Objects whose keys are all numbers or UUIDs are recognised as lookup tables and typed as Record<string, T> instead of a long list of properties.

Tip: paste a sample with several items rather than one, and include records that have the rare fields filled in. The more variety the generator sees, the closer the optional markers and unions match the real data.

This tool runs entirely in your browser. What you type or open is never sent to a server.

Frequently asked questions

Why is a property marked with a question mark?

A question mark means the key was absent from at least one of the objects that were merged, usually items of the same array. If the key is in fact always present and your sample simply lacks it, remove the ? by hand or paste a more complete sample.

How are the names of nested types chosen?

From the key that holds the value, converted to PascalCase. Lists are singularised, so users gives User and categories gives Category. When two different objects would get the same name, the second one is prefixed with its parent, for example CompanyAddress. Names that already belong to built-in types such as Date or Error get a suffix.

Should I pick interface or type?

Both describe the same shape. Interfaces can be extended and merged later, while type aliases are often preferred in codebases that lean on unions and utility types. Pick whatever matches the style of your project; the generated members are identical.

Does my JSON get uploaded to create the types?

No. The generator is a small script that runs on your computer inside the page. Payloads containing customer data or internal identifiers never leave the browser.

Can it detect dates, enums or tuples?

No. A date in JSON is only a string, so it is typed as string. Repeated string values are not turned into literal unions, and arrays are always typed as lists of one merged item type, never as fixed-length tuples. Tighten those types by hand where you know more than the sample shows.