JSON to TypeScript

Why generate TypeScript types from JSON?

When you work with an API, a config file or any external data source, the data arrives as untyped JSON. TypeScript can only protect you once that shape is described as a type — otherwise every property access is a guess and a potential runtime crash. Writing those interfaces by hand is tedious and error-prone, especially for deeply nested responses with dozens of fields.

This tool does it for you. Paste a JSON sample and it infers a complete set of TypeScript interfaces — nested objects become their own named interfaces, arrays get element types, mixed values become unions, missing keys become optionals, and nulls are folded in. It runs entirely in your browser, so even a production API response full of sensitive values can be converted without anything being uploaded.

How to use it

1. Paste your JSON into the input box. Click Sample to see how a nested object with arrays is typed.
2. The TypeScript interfaces appear live underneath as you type or paste.
3. Set the root interface name (default Root) to whatever fits your domain — User, ApiResponse, Product.
4. If the JSON is invalid, a clear error message shows what went wrong so you can fix it.
5. Click Copy to drop the interfaces straight into your editor.

A good workflow: hit an API in your terminal or browser, copy the JSON response, paste it here, name the root after the endpoint, and paste the result into a types.ts file.

How the inference works

The generator walks the JSON tree and decides a type for every value:

• Primitives map directly: a string becomes string, a number number, a boolean boolean.
• Objects become named interfaces. The name is derived from the key that holds them, converted to PascalCase — so a key userProfile produces an interface UserProfile. Nested objects produce nested interfaces, each declared separately and referenced by name, which keeps the output readable instead of one giant inline type.
• Arrays are typed by their elements. The tool inspects every element, collects the distinct types, and produces a single element type — deduplicated, so an array of ten strings is just string[], not a ten-way union. An array of objects is merged into one interface describing all of them.
• Mixed arrays become a union: (string | number)[]. This is honest about what the data actually contains rather than silently picking one type.
• Optional fields are detected across an array of objects. If a key is present in some elements and absent in others, it is marked with ?. This is exactly the pattern you see in real API lists where some records omit nullable fields entirely.
• Null contributes null to a field's type, producing unions like string | null — the difference between "this field is missing" (optional) and "this field is present but empty" (nullable), both of which matter in TypeScript.
• Empty arrays have nothing to infer from, so they become unknown[], a deliberate signal that you should narrow the type yourself.

Because nested interfaces are declared before the parents that use them, the output drops straight into a file and compiles without reordering.

The limits of inference (and why they matter)

Inference is powerful but it is not magic — it can only describe the exact sample you give it. Keeping its blind spots in mind saves you from false confidence:

• One sample is not the whole API. If your example response happens to omit an optional field, the generated type will not include it at all. Paste a richer sample, or several merged into an array, to surface more of the real shape.
• Strings hide enums. A field that is always "active" or "pending" infers as string, not as a "active" | "pending" union. The tool cannot know the closed set of allowed values from one example.
• Numbers hide meaning. An ID, a timestamp and a price all infer as number. Semantic distinctions (branded types, literal unions) are yours to add.
• unknown[] is a placeholder. An empty array means the tool genuinely has no information; replace it with the real element type once you know it.

None of this makes the output less useful — it removes the boring 90% of the work and leaves you the meaningful 10% of refinement.

Tips for better generated types

• Refine after generating. Treat the output as scaffolding. Tighten obvious string fields into literal unions, mark fields optional or required to match the contract, and split overloaded interfaces if one shape is really two.
• Feed it arrays for optionals. If you care about which fields are optional, paste an array of representative records rather than a single object. The tool can only detect optionality by comparing elements.
• Handle nullables explicitly. When a field can be null, make sure your sample includes a null example so the type comes out as T | null and your code is forced to handle the empty case.
• Name interfaces meaningfully. Rename the root and let the nested names follow from your keys — User, Address, OrderLine read far better in code than Root and Root2.

Working with API responses

The most common use is turning an API response into types. Call the endpoint, copy the JSON body, and paste it here — if it comes back minified, tidy it with the JSON formatter first so you can read the shape before you type it, or if you'd rather pull the same records into a spreadsheet, send them through the JSON ↔ CSV converter instead. For list endpoints that return an array, paste the whole array — the tool merges every element into one interface and correctly marks fields that only some items include as optional. For paginated responses, paste the full envelope (the data, meta and links wrapper) so the surrounding structure is typed too, then refine the inner item type as needed.

Private by design

API responses are exactly the kind of data you should not paste into a random website — they routinely contain auth tokens, internal identifiers and personal data. Server-side "JSON to TypeScript" converters send all of that to their backend to do the work. In November 2025 a popular server-side formatter leaked pasted content through a saved-session feature, the precise risk that local tools sidestep. This generator runs the inference in your browser: nothing is transmitted, nothing is retained, and closing the tab clears it. Convert your real responses with confidence, copy the interfaces, and ship.