🧩 Developer Tools

JSON to TypeScript

Paste a JSON response or config file and get the matching TypeScript type definitions (interface / type) on the spot. Nested objects, arrays, null and optional properties are inferred for you. Everything runs in your browser, so the JSON you paste never leaves it.

Examples (click to try)

The name of the outermost type. Nested objects are named automatically from their keys.

How to use the JSON to TypeScript tool

New here? Click one of the "Examples (click to try)" chips above the input. A sample JSON is filled in and its types appear right away. Once you are comfortable, just paste JSON into the textarea. It is a live conversion, so there are no buttons to press. Grab the result with "Copy" or "Download .ts".

Example: typing an API response

For instance, pasting this JSON:

{"id":1,"name":"Aoi","tags":["dev","design"],"profile":{"age":20,"bio":null}}

produces this in "interface" mode (root type name Root):

export interface Root {
  id: number;
  name: string;
  tags: string[];
  profile: Profile;
}

export interface Profile {
  age: number;
  bio: null;
}

The nested profile is extracted into its own interface and referenced by name from the parent.

  • Root type name: names the outermost type (default Root). Nested objects are named from their keys in PascalCase, with a numeric suffix if a name would clash.
  • interface / type toggle: tick it to emit a type alias instead of an interface.
  • readonly: adds the readonly modifier to every property, handy for response types you treat as immutable.
  • Inference rules: arrays get [] on the element type ((A | B)[] when mixed, unknown[] when empty). null is combined as | null. An array of objects unifies the keys of every element, and keys missing from some elements become optional (?).

Handy for

  • Quickly typing an undocumented internal API response
  • Bootstrapping an interface from mock JSON or sample data
  • Understanding the shape of deeply nested JSON as a type
  • Aligning the data shape passed between your frontend and backend

The generated types are inferred from a single sample. Adjust them by hand to match the real API contract (which fields are optional, the range of allowed values, and so on).

FAQ

Is the JSON I paste sent to any server?
No. Parsing the JSON and generating the TypeScript types happens entirely in your browser, and the JSON you paste is never sent to or stored on any server. It is safe to use even with internal API responses or JSON containing personal information.
How are nested objects, arrays and null typed?
Nested objects are extracted into a separate interface named after the key in PascalCase, and the parent refers to them by that type name. Arrays get [] on the element type, mixed element types become (A | B)[], and an empty array becomes unknown[]. An array of objects is merged into a single type that unifies the keys of every element. A key whose value is only ever null gets the null type, and a key mixing null with another type gets | null appended, such as string | null.
How is an optional (?) property decided?
In an array of objects, a key that exists on only some of the elements is treated as optional and gets a ? after its name. For example, if element A has title and likes but element B has only title, likes? is emitted as an optional property. Keys present on every element become required properties.