JSON tools

JSON to TypeScript Interface Converter

Paste a JSON response and get clean TypeScript interfaces or type aliases, with nested types named, arrays merged and optional fields detected.

  • Free foreverNo trial, no paywall, no usage limits.
  • No sign-upOpen the page and start. We never ask for an email to use a tool.
  • PrivateEverything runs in your browser. Your input is never uploaded or stored on our servers.
  • Works offlineOnce the page has loaded, the tool keeps working without a connection.

TypeScript options

Every option has a tooltip. Your choices are remembered on this device; your JSON never is.
Reset options to defaults
Name of the top-level type. If your JSON is an array, this names each item. Nested types are named after their keys.
Interfaces can be extended and merged, and read best in editor tooltips.Type aliases compose with unions and mapped types (Partial, Pick…).
Exact: a field that was null in the sample is typed T | null.Treat null like a missing key (field?: T). Looser, but common in front-end code.
Prefix every type with export so other modules can import it.
Mark properties and arrays readonly, so the compiler stops accidental mutation of API data.
Type values the sample can't describe (empty arrays, mixed shapes) as any instead of the safer unknown.

JSON sample

Paste a real response. Arrays are treated as samples: keys missing from some items become optional, null values nullable.
Clear

TypeScript types

CopyDownload types.ts
Paste JSON or load the example. Code is generated in your browser as you type.

Need this built into your own API or pipeline? Talk to our team

Quick answer

To convert JSON to TypeScript, describe each object as an interface whose properties match its keys and value types. Paste a sample into Playxoft's free JSON to TypeScript converter and the interfaces are generated as you type: nested objects become named types, array items are merged so keys missing from some items become optional, and null values are typed T | null. Choose interface or type, readonly and export to match your codebase.

  • Interfaces or type aliases
  • Optional and nullable detection
  • Array samples merged
  • Named nested types
  • Readonly and export options
  • Quoted unsafe keys
  • Download types.ts

How to use the JSON to TypeScript

  1. 1Paste a JSON response into JSON sample, or click Load example.
  2. 2Set the Root type name, for example User.
  3. 3Pick interface or type, and how Null values are typed.
  4. 4Toggle Export, Readonly and Use any to match your codebase.
  5. 5Copy the code or download types.ts.

How does JSON map to TypeScript types?

Each JSON value has a natural TypeScript counterpart, and the generator applies these rules to every key in your sample:

JSON valueTypeScript
"text"string
42 or 3.14number
true or falseboolean
nulladds null to the field's type
An objectA named interface
An arrayT[], with every item merged into one T
An empty arrayunknown[]: there are no items to learn from
An empty objectRecord<string, unknown>

Mixed arrays become unions, so [1, "a"] is typed (string | number)[]. Objects keyed by IDs, such as {"101": {...}, "102": {...}}, become Record<string, T> instead of an interface with one property per ID.

Nested objects are named after their key, and array items get the singular form: an orders array produces an Order interface, categories produces Category. Objects with identical shapes share one type instead of producing duplicates.

Interface or type alias: which should I use?

For object shapes like API responses the two are interchangeable, and the TypeScript handbook suggests using an interface until you need a feature only type aliases have.

interfacetype
Extend another shapeextendsIntersection with &
Declaration mergingYesNo
Unions and mapped typesNoYes
Error messagesShow the type's nameMay expand the full shape

Pick one and stay consistent. Choose type if your codebase already composes types with unions or utility types such as Pick and Omit, and Readonly if API data should never be mutated after it arrives.

How are optional and nullable fields detected?

A single object can only show what one response looked like. Paste an array of several responses instead and the generator merges them: a key missing from some items becomes optional (?), and a key that is null in any item becomes nullable. These mean different things, and the difference matters:

interface User {
  nickname?: string;        // the key may be absent
  avatarUrl: string | null; // the key is always there; the value may be null
}

If your code treats both cases the same way, set Null values to T?. With the exactOptionalPropertyTypes compiler option enabled, an optional property can't be assigned undefined explicitly, so the distinction becomes a compile-time check.

Why should I still validate API responses at runtime?

TypeScript types vanish when your code compiles. If an API returns "price": "12.50" where your interface says number, nothing stops it, and the bug surfaces far from its cause. Types describe what you expect; they don't check it.

For data you don't control, validate at the boundary. A schema library such as Zod checks the data and gives you the static type from the same definition, so the two can't drift apart. The JSON to Zod generator builds that schema from the same sample:

const user = UserSchema.parse(await res.json()); // throws on a mismatch

How are dates, big numbers and unusual keys handled?

  • Dates arrive as strings, because JSON has no date type and JSON.parse doesn't revive them. ISO 8601 fields are typed string with a comment; convert them with new Date(value) where you use them.
  • Integers above 2^53 are typed number with a warning comment, because JSON.parse has already rounded them. Ask the API for strings if exact IDs matter.
  • Keys that aren't identifiers, such as first name or 2fa, are quoted: "first name": string. Reserved words like class and default are fine as property names.
  • Fields that were only ever null are typed null with a comment, so you remember to widen them once you know the real type.
  • Empty arrays become unknown[], or any[] with Use any, since there is nothing to infer from.

Frequently asked questions

Yes. Paste an array of objects and every item is treated as a sample. Keys missing from some items become optional, keys that are sometimes null become nullable, and fields with different value types become unions.
Prefer unknown. It forces a type check before you use the value, while any switches type checking off entirely. Turn on Use any only for quick prototypes or code that already relies on it.
JSON has no date type, so JSON.parse always returns dates as strings. Typing them as Date would be a lie the compiler can't catch. The generator marks ISO 8601 fields with a comment so you can convert them deliberately.
Yes. Every nested object becomes its own named interface, named after its key, and identical shapes are shared. Large responses of several megabytes are processed in the background without freezing the page.
Use a JSON Schema compiler such as json-schema-to-typescript. This tool infers types from example data, which is quicker when you have a real response but no schema.
The generated interface keeps every key exactly as the API sends it, such as user_id, because a type has to describe the real JSON. If you want camelCase in your app, convert the response once at the boundary into a second type, or validate it with Zod and rename the keys in a transform step.

Last updated by the Playxoft engineering team.

From the engineers who built this tool

Fighting messy data every day?

When payloads, schemas and integrations keep breaking, the fix is usually upstream. We design typed APIs and backends that stay clean as you grow. Tell us what you are building and we will suggest the simplest architecture that fits.