JSON to TypeScript Interface Generator
Paste any JSON object and get a fully-typed TypeScript interface — or a set
of nested interfaces — generated instantly in your browser. Handles nested objects, arrays,
optional properties, union types and null. Nothing is uploaded.
Last reviewed 2026-06-19.
How it works
- Parse — your JSON is parsed with the browser's native
JSON.parse. If it is not valid JSON, the error message is shown immediately. - Infer — the value tree is walked recursively. Each object becomes a named
interface. For arrays, the type is inferred from all elements so the resulting
type covers every item. Keys whose value is
null, or that are absent from some array elements, are marked optional with?. - Emit — interfaces are output deepest-first (child before parent) so the
file compiles top-to-bottom without forward references. Each interface is
exported, ready to paste into any.tsor.d.tsfile.
When properties become optional
Two conditions cause a property to receive the optional marker (?):
-
The value in the sample JSON is
null— the generator adds?and appends| nullto the type, because the real API may return either the value or nothing. -
The JSON contains an array of objects and a key appears in some elements but not
all — the key is added to the merged interface but marked
?, because not every record will have it.
If you know a field is always present and never null, simply remove the ? from
the generated output.
JSON → TypeScript type mapping
| JSON value | TypeScript type | Example JSON |
|---|---|---|
string | string | "Alice" |
number | number | 42 or 3.14 |
boolean | boolean | true or false |
null | T | null (+ optional ?) | null |
array of T | T[] | ["a","b"] |
array of mixed primitives | (string | number | boolean)[] | [1,"x",true] |
object | interface Name { … } | { "city": "NYC" } |
unknown / empty array | unknown[] | [] |
Interface naming
Interface names are derived from the JSON key name and converted to PascalCase — for
example, a key user_profile produces an interface called
UserProfile, and lineItems produces LineItems. The
root object always uses the name from the Root interface name field above
(default Root). Rename it to match your domain model — for example,
User, ApiResponse, or Product.
Privacy & security
All processing happens entirely inside your browser — no data is sent to any server, no cookies are set, and nothing is logged. It is safe to paste real API responses, including those with personal data, because the content never leaves your device. The tool also works offline once the page has loaded.
Frequently asked questions
- Does this handle deeply nested objects?
- Yes. The generator walks the entire JSON tree recursively. Each nested object becomes its own named interface, and parent interfaces reference those child interfaces by name. Interfaces are emitted deepest-first so the output compiles top-to-bottom without forward references.
- What happens with arrays of mixed types?
- When all elements of an array are primitives (string, number, boolean) the generator produces a union array type such as (string | number)[]. When elements are objects it merges all observed keys across every element — a key present in some elements but not others is marked optional (?) so the type correctly represents all items in the array.
- What does the ? (optional) mark mean?
- A property marked with ? is optional — it may be absent from some objects in practice. The generator adds ? when a key's value is null in the sample JSON (indicating the real value may be absent), or when a key appears in some but not all elements of an array of objects. In TypeScript, an optional property may be missing from the object altogether — it is distinct from a property that is present but explicitly null.
- Can I use this output directly in TypeScript?
- Yes. The generated interfaces use standard TypeScript syntax and are exported, so you can paste them directly into a .ts or .d.ts file. You may want to rename interfaces or adjust optionality based on your domain knowledge — the generator infers types from a single sample JSON, so it cannot know which fields are truly required in every case.
- How do I handle arrays of objects?
- When an array contains objects the generator creates a named interface for the element type — for example a key users: [{...}] produces an interface Users {...} and types the property as users: Users[]. If different objects in the array have different keys, all keys are merged and any key missing from at least one element is marked optional.
- What if my JSON has keys that are not valid TypeScript identifiers?
- Keys that contain spaces, hyphens, dots, or start with a digit are not valid TypeScript identifiers. The generator detects these and wraps them in quotes — for example "my-key"?: string — which is valid TypeScript object type syntax. You can then access such properties with bracket notation: obj["my-key"].
Related tools
See all browser tools → · All developer & data conversions →