Why generate types from JSON?
Hand-writing an interface for an API response is tedious and quietly error-prone — it is easy to mistype a key or assume a field is always present when it is not. Generating from a real response gets the shape right by construction. The important caveat is that a sample only shows you what that one response contained: a field that happened to be null becomes null, a field absent from your sample will not appear at all, and a numeric enum looks like a plain number. Treat the output as an accurate first draft to refine against the API contract, not as a substitute for it.
How to use this tool
- 1 Paste a JSON object or array — the sample loads a nested example to start from.
- 2 Set the root type name and choose interface or type declarations.
- 3 Toggle export, readonly, and whether nullable fields become optional.
- 4 Copy the generated types straight into your project.
Frequently asked questions
How are nested objects handled?
Each nested object becomes its own named interface, derived from its key name in PascalCase, and the parent references it by name. Array element names are singularised, so a "posts" array produces a Post interface rather than a Posts one.
What happens with arrays of differing objects?
Objects that map to the same generated name are merged into one interface. Keys present in some records but not others are marked optional with ?, and keys whose types differ across records become a union. That is usually what you want from a sample containing real variation.
Why did my field come out as null?
Because that is all the sample showed. JSON null carries no type information, so there is nothing to infer. Turn on "null → optional" to emit the field as optional instead, then widen it by hand to the real type once you know it — usually string | null or similar.
Is this the same as quicktype?
No. quicktype does far more: multiple target languages, sampling across several inputs, enum and union detection, runtime validators. This is a single-sample TypeScript generator that runs entirely in your browser with nothing uploaded. For a quick interface from a response you just copied out of DevTools, that is usually the right size of tool.
Does it handle top-level arrays?
Yes. A top-level array generates an interface for the element shape plus a type alias for the array itself, so you get both the item type and the collection type in one go.