JSON Formatter & Validator
Format, validate, and minify JSON before generating types from it.
JSON to TypeScript Converter
Paste any JSON payload and get clean TypeScript interfaces back. The converter handles nested objects, arrays of mixed shapes, optional fields, and union types — useful when you need types for an API response, a configuration file, or a third-party payload that has no published schema. Everything runs in your browser, so even sensitive payloads stay on your device.
How to Use This Tool
- Paste your JSON into the text area. Use a representative sample — include every field you expect to see in production, especially optional ones, so the converter can mark them correctly.
- Set the root interface name. Default is
Root, but pick something descriptive likeUser,ApiResponse, orOrderso the generated types read well in your project. - Choose output style. Toggle between
interfaceandtype, switchunknownforany, mark fieldsreadonly, or prependexportif you'll paste into a module. - Review the output. Each nested object gets its own named interface, arrays of objects produce a singular interface name, and fields missing from some array elements are marked optional with
?. - Copy the result to your clipboard and paste it into your
types.tsfile. Manually refine anynull-only fields if you know the non-null type, since the converter only sees what's in the sample.
What This Converter Does
TypeScript projects that consume JSON data — REST or GraphQL responses, NDJSON streams, configuration files, message-queue payloads — need types that match the runtime shape exactly. Hand-writing those types is tedious and error-prone, and a single missed optional field can break compilation hours into a refactor. This tool generates the types automatically from a sample of real data, so you can paste an API response and get back a usable starting point in seconds.
The conversion is purely structural: it looks at the shape of the JSON and emits one interface per distinct nested object. Arrays produce T[] types where T is the unified type of every element seen. When an array contains multiple objects with slightly different keys, the converter merges all keys into a single interface and marks any non-shared field as optional. Mixed primitive arrays produce union types — for example, [1, "two"] becomes (number | string)[].
Generated types are a starting point, not a substitute for a real schema. JSON does not distinguish between "this field is always present and always a string" and "this field happened to be a string in the one example I saw." If your data has fields that vary in shape based on a discriminator, or fields that can legitimately be any of several primitive types, you'll need to refine the output by hand. The tool's job is to do the boring 90% so you can focus on the interesting 10%.
Example Conversion
Given this JSON input:
The converter produces:
Notice that pinned is optional because only one of the two posts has it, posts is automatically singularized to Post, and avatar is marked optional because its only observed value was null. You'll typically want to update avatar by hand to string | null if you know it will hold a URL when present.
Frequently Asked Questions
How does JSON to TypeScript conversion work?
The converter walks your JSON value by value and infers a TypeScript type for each one. Strings become string, numbers become number, booleans become boolean, and null becomes null. Objects become named interfaces using the surrounding key as the interface name in PascalCase, and arrays become T[] where T is the inferred element type. When an array contains multiple objects, the converter merges all keys it sees into a single interface and marks any key that does not appear in every element as optional.
How are optional fields detected?
A field is marked optional when it is missing from at least one object in an array of the same shape, or when its value is null. For example, in an array of two posts where only one has a pinned key, the converter outputs pinned?: boolean. If a value is null in your sample but no other examples exist, the field becomes optional with the null type, and you can adjust it manually if you know the non-null type.
Should I use interface or type alias?
Both produce equivalent compile-time checks for object shapes. Interface is the conventional choice when you want declaration merging or when the type might be extended later. Type alias is preferred when you need union types, mapped types, or conditional types at the top level. For generated types from JSON, interface is the slightly more idiomatic default, but the converter offers both — pick whichever your project already uses.
What is the difference between unknown and any?
Both represent values whose type cannot be inferred (typically empty arrays or values seen as null). The difference is safety: any disables all type checking on the value, while unknown forces you to narrow the type before using it. unknown is the recommended modern default — it preserves type safety and is what TypeScript itself recommends for new code. Use any only when migrating older codebases that depend on its looser behavior.
Does the tool support nested objects and arrays?
Yes. Each nested object becomes its own named interface using the field name in PascalCase, and arrays of objects produce a singular interface name (for example, posts becomes Post). Deep nesting is fully supported — the converter recurses to any depth and emits one interface per distinct shape. If two different paths produce the same interface name, their fields are merged into a single interface, with non-shared fields marked optional.
Is my JSON sent to a server?
No. All conversion happens entirely in your browser using JavaScript. Nothing is uploaded, logged, or shared. You can paste API responses, configuration files, or any sensitive data with full confidence — close the tab and the data is gone. This makes the tool safe to use for proprietary payloads, internal API schemas, and data you cannot share with external services.