Convert · JSON to TypeScript

Convert JSON to TypeScript

Generate TypeScript interfaces from a JSON sample — nested objects become named interfaces, arrays are typed by their elements, and inconsistent keys are marked optional. Runs in your browser.

Open the Editor

No sign-up to start · Runs in your browser

JSON to TypeScript

Open your JSON in the editor

JSON

TypeScript

Runs entirely in your browser — nothing is uploaded.

{"id":1,"name":"Ada","roles":["admin"],"profile":{"active":true,"age":36}}

A JSON-to-TypeScript converter reads a sample payload and infers interfaces from its shape. JSON Copilot turns each object into an exported interface, gives nested objects their own PascalCase name, types arrays by their elements, and marks a key optional with a ? suffix when it is absent from some items in an array. It runs entirely in your browser, so you can paste an API response and get typed models in seconds — no build step, no account, nothing uploaded.

JSON to TypeScript example

JSON sample

{
  "id": 42,
  "name": "Ada",
  "tags": ["admin", "editor"],
  "address": { "city": "London", "zip": "N1" },
  "orders": [
    { "sku": "A1", "qty": 2 },
    { "sku": "B7", "qty": 1, "gift": true }
  ]
}

TypeScript interfaces

export interface Address {
  city: string;
  zip: string;
}

export interface Order {
  sku: string;
  qty: number;
  gift?: boolean;
}

export interface Root {
  id: number;
  name: string;
  tags: string[];
  address: Address;
  orders: Order[];
}

address becomes its own Address interface and orders is typed as Order[]. gift is optional because it appears in only one of the two order objects — the converter merges every object in an array into a single interface and flags any key that is not present in all of them.

How to convert JSON to TypeScript

1
Paste a representative sample
Drop a JSON payload into the input, or use the loaded example. A sample that covers your optional and nullable fields yields more accurate types.
2
Generate the interfaces
Every object becomes an exported interface. Nested objects get their own named interface, and arrays are typed by the elements they contain.
3
Review optional and union fields
Keys missing from some items in an array are marked with ?, and mixed value types become unions. Rename the root or nested interfaces to match your domain.
4
Copy the TypeScript
Copy the generated interfaces straight into a .ts file or a types module in your project.
5
Open the JSON in the full editor
Send the same JSON to the full editor to format, validate against a schema, explore it as a tree or mind map, and query it with the AI copilot.

Why use this converter

Runs in your browser

Inference is 100% client-side. Your JSON never leaves your device and no account is needed.

Named nested interfaces

Each nested object becomes its own PascalCase interface named after the key, so the output is readable and reusable.

Optional fields

The converter merges every object in an array and marks a key optional with ? when it is not present in all of them.

Typed arrays

Arrays are typed by their contents: string[], an interface array like Order[], or unknown[] when empty.

Union element types

Mixed primitives produce a union such as string | number, and nullable values add | null.

Copy-ready output

Interfaces are exported and formatted with two-space indentation, ready to drop into your codebase.

How JSON Copilot infers TypeScript interfaces

Inference is structural: the converter reads the values in your sample and derives a type for each one. A plain object becomes an exported interface. Each nested object gets its own interface, named by converting the key to PascalCase — an address key produces an Address interface, and the parent field references it as address: Address. Naming collisions are resolved by appending a number, so two differently shaped user objects would become User and User2.

Arrays are typed by the elements they hold. An array of strings becomes string[], and an array of objects is collapsed into one interface that is referenced as, for example, Order[]. When an array contains objects with differing keys, they are merged into a single interface rather than a union of interfaces: every key seen across the items is included, and any key not present in all of them is marked optional with a ? suffix.

Primitive values map to number, string, or boolean. When a field holds more than one primitive type across the sample, the result is a union such as string | number, and arrays of mixed primitives are wrapped as (string | number)[]. A value that is sometimes null adds | null to its type, and the root object is emitted as an interface named Root alongside every nested interface it depends on.

What inference can and cannot capture

The output is best-effort inference from one sample, so its accuracy depends on how representative that sample is. If a key never appears in your JSON, it cannot appear in the types. If an optional field happens to be present in every item you pasted, it will be typed as required. The reliable fix is to paste an array of records that together exercise the fields that are optional, nullable, or occasionally a different type.

Some information simply is not in the data. String literals stay string — the converter will not narrow "active" into a "active" | "archived" enum — and semantic formats like ISO dates, emails, or UUIDs are all typed as string. Numbers are typed as number with no distinction between integers and floats. These are limits of inferring types from values rather than from a specification, so treat literal unions, branded types, and format constraints as a manual refinement step.

Empty and null-only values degrade gracefully rather than guessing. An empty array becomes unknown[] because there are no elements to inspect, and a field that is null in every sample is typed as null. Keys that are not valid TypeScript identifiers are quoted in the interface, so a field like "content-type" is emitted safely. Reading these placeholders as a prompt to add a better sample usually resolves them.

JSON Schema vs TypeScript types

TypeScript interfaces and JSON Schema solve related but distinct problems. Interfaces are a compile-time contract: they power editor autocomplete and catch mismatches during tsc or your bundler, then vanish from the shipped JavaScript. They cannot validate data that arrives at runtime, so a malformed API response will still satisfy the compiler if you assert its type.

JSON Schema is itself a JSON document that validates data while your program runs. It can express constraints that TypeScript inference cannot recover from a sample — enumerations, numeric ranges, string patterns and formats, required-versus-optional rules, and minimum or maximum array lengths. It is the right tool for validating request bodies, config files, or third-party payloads at the boundary of your system.

The two are complementary. A common workflow is to generate TypeScript interfaces here for the shapes you code against, and generate a JSON Schema with the JSON Schema Generator for the runtime checks at your API or form boundary. If your source of truth is a schema, you can keep the interfaces in sync from it; if it is a sample payload, generate both from the same JSON so the compile-time and runtime contracts describe the same data.

Tips for a representative sample

Because the types are only as complete as the JSON you paste, spend a moment on the sample. For a collection endpoint, paste an array of several records rather than a single one — the converter merges them, so keys that vary between records are correctly marked optional and fields that hold different types become unions. Include at least one record that carries every optional field and at least one that omits it.

Cover the awkward values explicitly. Add a record where a nullable field is actually null so it earns | null, and one where an occasionally-missing field is present so it is not silently dropped. If an array is sometimes empty in production, paste a populated example so the element type is inferred rather than falling back to unknown[]. After generating, rename Root and any nested interfaces to your domain vocabulary.

Once the interfaces look right, open the same JSON in the full editor to keep working with it. There you can format and validate it, visualize its structure as a collapsible tree or a mind map to sanity-check nesting, and ask the AI copilot to explain a field or draft a matching schema. The interfaces you copied and the data you are exploring stay in agreement because they came from the same sample.

Frequently asked questions

Is the JSON to TypeScript converter free and private?

Yes. Inference runs entirely in your browser with no account and no upload — your JSON never touches a server.

How does it infer the interfaces?

It walks your sample and builds a type from each value: objects become exported interfaces, nested objects get their own PascalCase interface named after the key, and arrays are typed by their elements. It is structural inference from the data you paste, not a runtime schema.

Why is a field marked optional with a ?

When you paste an array of objects, the converter merges them into a single interface. If a key is present in some items but missing from others, it is marked optional. Include an item that has every field, and an item that omits the optional ones, to model that accurately.

Can it detect enums, dates, or string formats?

No. A field like status: "active" is typed as string, not a "active" | "archived" union, and an ISO date is typed as string. Inference sees values, not intent, so tighten literal unions and branded types by hand after generating.

What is the difference between JSON Schema and TypeScript types?

TypeScript interfaces describe shapes for the compiler and disappear at runtime. JSON Schema is a JSON document that validates data at runtime and can express enums, ranges, and formats that TypeScript inference cannot guess. Use the TypeScript output for editor and compile-time safety, and the JSON Schema Generator when you need runtime validation.

How are arrays and mixed values typed?

An array of objects becomes an interface array, an array of strings becomes string[], and an empty array becomes unknown[]. Mixed primitives collapse into a union like (string | number)[], and a value that is sometimes null gains | null.

What is the root interface called?

The top-level shape is named Root. Rename it to match your model — for example User or ApiResponse — and update the references the converter generated for nested interfaces.

Where does the generated result go?

Copy the interfaces into your project, or open the JSON in the full editor to format, validate, visualize it as a tree or mind map, and use the AI copilot. The interfaces describe the same JSON you were working with.

Generate TypeScript from your JSON