JSON to TypeScript Interface Generator
Paste a JSON object or an array of objects below and get clean, fully typed TypeScript interfaces instantly. The converter handles nested objects, arrays, union types, and nullable fields. Everything runs client-side - your data stays in your browser.
Try These Examples
Simple object- A flat object with string, number, boolean, and null fieldsNested object- A user profile with nested address, roles array, and metadataArray of objects- A list of products with varying optional fields
How It Works
The converter follows a straightforward process to turn arbitrary JSON into well-structured TypeScript interfaces:
- Parse - Your JSON string is parsed with the browser's native
JSON.parse(). If the input is invalid, you get an immediate error with position details. - Type inference - Each value is inspected recursively. Primitives map to
string,number,boolean, ornull. Objects trigger a new named interface. Arrays are analysed element-by-element to determine the item type. - Interface generation - Every distinct object shape becomes its own
interfacedeclaration. Property names that are not valid identifiers are quoted. Nested object keys are capitalised to form interface names (e.g., anaddressfield produces anAddressinterface). - Union types - When an array contains mixed types, the tool produces a union like
(string | number)[]. When objects in an array have different keys, those keys are merged and marked optional with?where they do not appear in every element. - Array-of-objects input - If the top-level JSON is an array, the tool merges all element shapes into a single interface and types the root as an array of that interface.
No external libraries are used. The entire conversion happens synchronously in your browser's main thread, so the result appears the moment you click Generate or type into the input field.
Frequently Asked Questions
How does JSON to TypeScript conversion work?
The tool parses your JSON with JSON.parse(), then recursively walks every key-value pair to infer TypeScript types. Primitive values map directly (string, number, boolean, null). Objects generate separate named interfaces, and arrays are typed by inspecting every element and merging their types into a single type or union.
What happens with mixed-type arrays?
When an array contains elements of different types - for example [1, "hello", true] - the tool generates a union type: (number | string | boolean)[]. If the array contains objects with different shapes, their properties are merged into a single interface with optional fields for keys that do not appear in every element.
Can I change the root interface name?
Yes. There is a text field above the JSON input where you can set any valid TypeScript identifier as the root interface name. The default is "Root". Nested object interfaces are automatically named based on their parent key, such as "Address" for an "address" field.
Is my data safe when using this tool?
Absolutely. This tool runs entirely in your browser using client-side JavaScript. Your JSON is never sent to any server, stored, or logged. You can confirm this by checking the Network tab in your browser's developer tools while using the converter.