JSON to TypeScript
Convert JSON into TypeScript interfaces or type aliases with nested types and unions. Runs in your browser — nothing is sent to a server.
How to Use JSON to TypeScript
- Paste your JSON into the left panel, or click a sample button to load an example. Conversion runs automatically as you type.
- Set the root type name to whatever the top-level shape represents, such as
UserorApiResponse. - Pick the output kind —
interfacefor declarations you may want to extend or merge, ortypealiases if your codebase prefers them. - Toggle export keyword off if you are pasting the result into a file that already re-exports its types.
- Toggle Optional for nulls to mark every nullable property with
?, which is handy for request payloads where the field can simply be omitted. - Toggle readonly properties to prevent accidental mutation of decoded API data.
- Copy the generated code with the Copy button and paste it into your project.
What Are TypeScript Interfaces For?
An interface describes the shape of an object: which properties exist, what type each one holds, and which ones are optional.
TypeScript erases all of this at build time, so an interface costs nothing at runtime — its entire value is what the compiler and
your editor can do with it. Once a response is typed, autocomplete lists the real field names, renaming a property updates every
call site, and a typo like user.emial becomes a compile error instead of
an undefined that silently flows into your UI.
Interfaces are also the cheapest documentation a team can have. A newcomer reading
interface Invoice learns the entire payload in a few lines without
opening the network tab or hunting through backend code. And because TypeScript models nullability explicitly, a type like
string | null forces the caller to handle the empty case rather than
discovering it in production.
Why Generate Types From a Real API Response?
Hand-writing types for an API response is slow and error-prone. A moderately sized payload can carry fifty keys across four levels of nesting, and every one of them has to be transcribed with the correct spelling and the correct type. Generating the types from an actual response you captured removes both problems at once: the field names come from the data, so they cannot drift, and the types reflect what the server really sent rather than what the documentation claims it sends.
This tool does more than a one-to-one mapping. Every nested object becomes its own named interface derived from its key, so you get
reusable building blocks instead of one giant inline shape. Arrays of objects are merged across all their elements — if one item has
a discount field and another does not, the property is emitted as
optional; if a field is a string in one element and null in another, you get
string | null. Arrays with mixed primitives become a union such as
(string | number)[], empty arrays become
unknown[] so you are forced to narrow them, and keys that are not
valid TypeScript identifiers — like user-name or
2fa — are quoted automatically.
Treat the output as a strong first draft. A sample response cannot tell the generator that a numeric
status is really an enum of three values, that a string holds an ISO
date, or that a field is nullable even though your sample happened to include it. Paste a response with as much variation as you can
get — ideally several list items — then tighten the generated types by hand where the domain knowledge lives.
Specifications
- Accepts
- Text — type or paste
- Gives you
- copy to clipboard
- Where it runs
- Your browser — the file is never uploaded
- Sign-up
- None
- Cost
- Free, with no usage limits
FAQ
Should I generate an interface or a type alias?
For plain object shapes the two are almost interchangeable. Interfaces support declaration merging and extends, which is useful when a type is part of a public API that consumers may augment. Type aliases can express things interfaces cannot, such as unions and mapped types, and many teams standardise on them for consistency. Pick whichever matches your existing codebase — this tool emits both.
Why did an array become unknown[] instead of any[]?
An empty array in the sample gives no information about its element type, so the safest result is unknown[]. Unlike any, the unknown type will not silently pass through your code: TypeScript makes you narrow it before use, which surfaces the missing information instead of hiding it. Replace it with the real element type once you know what the endpoint returns.
How are arrays of objects handled?
Every element of the array is inspected and the shapes are merged into a single named interface. A key that appears in some elements but not others is emitted as optional, and a key whose type varies between elements becomes a union. The interface name is derived from the singularised key, so a users array produces a User interface.
What does the "Optional for nulls" checkbox do?
It appends a question mark to any property whose type includes null, producing something like bio?: string | null. This matches APIs where a nullable field may also be absent from the payload entirely, and it is convenient when the same type is reused for request bodies where you only send the fields you want to change. Leave it off if null and missing mean different things in your API.
Why are some property names wrapped in quotes?
TypeScript identifiers cannot contain hyphens or start with a digit, so keys such as user-name, 2fa, or content-type must be written as quoted string literal keys. The generator detects these automatically and quotes only the keys that need it, leaving normal identifiers untouched. Access them with bracket notation in your code.
Is my JSON uploaded anywhere?
No. The entire conversion runs in JavaScript inside your browser, and nothing is transmitted to a server or stored. That makes it safe to paste real API responses containing tokens, customer records, or other sensitive data. You can even load the page once and keep using it offline.