Developer Tools·2 min read

JSON to TypeScript: Generate Types From Sample Data

Typing an API response by hand is slow and easy to get wrong. The JSON to TypeScript tool reads a JSON sample and writes types that describe it, updating as you type. Set a root name, pick your style, and copy or download the result. It runs in your browser, so private API responses stay on your device.

Open the free JSON to TypeScript All insights

What the tool generates

A sample in, types out.

Each nested object gets its own named type instead of one deeply nested type. Names come from the key in PascalCase, so dimensions becomes Dimensions and shipping_address becomes ShippingAddress. Array items use a singular form, so variants becomes Variant. With Merge identical shapes ticked, two keys with the same structure share one type.

Objects inside an array are merged into one type, and a key missing from some items is marked optional with ?. Arrays of mixed values become unions such as (string | number)[]. Keys that are not valid identifiers, like user-id, are wrapped in quotes.

How to generate types

Three steps.

If the JSON is an array, the root becomes a type alias for an array of items.

Paste a real response or fixture, drop or upload a .json file, use Load URL, or press Try sample.
Type a Root name such as Product or ApiResponse. Choose interface or type under Declare with, and set the readonly, export, null and array options to match your code.
Press Copy or Download .ts and add the types to your project. Rename nested types if the names do not suit your code.

Better samples give better types

What to review by hand.

Types come from the sample, so a fuller sample gives more accurate types. With a single object there is nothing to compare, so every property is required. Add a few varied items to an array to get the optional fields right, or tick Make every property optional for a loose first draft.

A null value is typed as null, because the sample gives no hint of the real type. Change it to something like string | null once you know, or set null values to Make the key optional. An empty array becomes unknown[] and an empty object becomes Record<string, unknown>.

Compile-time types and runtime checks

Where Zod comes in.

TypeScript types exist only at compile time, so an API that returns a different shape will not raise an error by itself. Switch Output to Zod schema to close that gap. You get z.object() schemas with a z.infer type for each one, and calling the schema's parse method on a response rejects data that does not match.

The tool does not convert JavaScript code to TypeScript. It takes data and describes its shape. If the JSON arrives as a messy or broken string from a log, clean it up in the JSON Validator or JSON Formatter first, then generate types from a sample you trust. For JSON Schema output, use the JSON Schema Validator.