JSON to TypeScript — Generate Interfaces From a Payload
Paste a JSON payload and get TypeScript interfaces back. Nested objects become their own named types, an array of records is merged into one shape rather than a union of near-identical ones, keys that are missing from some elements are marked optional, and nulls are handled the way you choose. Everything happens in the page, so an API response with real customer data in it never leaves your machine.
This is the five-minute job at the start of every integration: an endpoint returns something, you need a type for it, and hand-writing forty fields is tedious and error-prone. The output is a starting point you then edit — narrowing a string to a union of literals, replacing a number that is really a timestamp, splitting a type that is doing two jobs — but it removes the transcription work and the typos that come with it.
How arrays of objects are handled
A list of records almost never has perfectly uniform elements: an optional field appears on some and not others, a nullable value is null in the first three. Producing a union of one interface per element would be technically accurate and completely unusable. Instead every object in the same position is merged into a single shape, and a key that was absent from any of them is marked optional with a question mark. That is nearly always what the API contract actually says.
Null, optional, and the difference between them
In TypeScript name: string | null means the key is always there and may hold null; name?: string means the key may be missing entirely. They are not interchangeable, and JSON alone cannot tell you which one the API means — a null in one sample could be either. The default keeps nulls visible as | null, which is the safer reading; the option to treat null as optional is there for APIs that genuinely omit empty fields. Check the documentation when it matters.
What a sample cannot tell you
These types describe one response, not the contract behind it. A field that is a number today may be a string tomorrow, an enum will look like a plain string, a date will look like a string too, and an array that happened to be empty becomes unknown[] because there was nothing in it to infer from. Treat the output as a draft and validate at the boundary — with Zod, io-ts, or a hand-written guard — if the data is coming from somewhere you do not control.
Related: tidy the payload first in the JSON formatter, convert it with JSON to YAML, or flatten it for a spreadsheet using JSON to CSV.
How to use JSON to TypeScript
- Paste a JSON object or array — a real API response works best, and the more representative the sample, the better the types.
- Name the top-level type. Nested types are named after the key they came from and singularised, so a posts array produces a Post interface.
- Choose the output style: export or not, interface or type alias, readonly properties, and whether null should become an optional key.
- Read the result. Optional keys came from records where that field was missing; unknown came from an empty array or an empty object.
- Copy it into your project or download it as a .ts file, then narrow anything the sample could not tell you — enums, dates, and IDs.
Features
- Array shapes merged — a list of records produces one interface with optional keys, not a union of twenty near-identical types.
- Named nested types — keys are turned into PascalCase names and plurals are singularised, so the output reads like code you would have written.
- Optional keys detected — a field missing from any element of an array is marked with a question mark.
- Null handled either way — keep it visible as a union member, or fold it into an optional key.
- interface or type, readonly or not — match the conventions already in your codebase.
- Runs in the browser — paste a real response with real customer data in it without sending it anywhere.
Frequently Asked Questions
Is my JSON uploaded?
No. It is parsed and analysed by JavaScript in this tab. That is the point — API responses used as samples routinely contain real names, emails and identifiers, and those should not be posted to a third-party converter.
How are arrays of objects turned into types?
Every object in the array is merged into one shape. A key present in all of them is required; a key missing from any of them becomes optional. This matches how APIs usually behave and avoids producing a union of dozens of almost identical interfaces.
What is the difference between the null options?
Leaving the default gives you field: string | null — the key is always present and may be null. Turning the option on gives you field?: string — the key may be absent. Only the API documentation can tell you which is correct; the default is the more conservative reading.
Why did I get unknown[]?
Because the array in your sample was empty, so there was nothing to infer an element type from. Paste a sample that includes at least one element, or fill the type in by hand.
Can it produce enums or literal unions?
No. A JSON string is just a string — nothing in the sample distinguishes a free-text field from one of five allowed values. Narrow those by hand after generating, which is usually a handful of fields.
Does it handle dates?
Dates come out as string, because that is what they are in JSON. Whether you convert them to Date at the boundary or keep the ISO string is a decision for your own codebase.
Should I trust these types at runtime?
TypeScript types are erased at compile time and guarantee nothing about what an API actually sends. If the data comes from somewhere you do not control, validate it at the boundary with a schema library and derive the type from the schema instead.