TS
JSON → TypeScript
Root
null as
JSONInput
31 lines560 B
TypeScriptOutput
export interface Root {
  user: User;
  posts: Post[];
  meta: Meta;
}

export interface Meta {
  total: number;
  page: number;
  perPage: number;
}

export interface Post {
  id: number;
  title: string;
  published: boolean;
  views: number;
  author: null;
}

export interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  active: boolean;
  score: number;
  tags: string[];
  address: Address;
}

export interface Address {
  street: string;
  city: string;
  zip: string;
  country: string;
}
37 lines5 interfaces

Related Tools

See all ->
JSON FormatterFormat & validateYAML ↔ JSON ConverterBidirectional, auto-detectJSON Table ViewerTabular JSON explorerAPI Request Generator & TesterGenerate · Test · 12 langsCSV → JSON ConverterTable preview & type inferenceDiff CheckerCompare text & codeJWT DecoderDecode & verify tokensRegex TesterTest & debug patterns

JSON to TypeScript Interface Generator — Convert JSON to TS Types Online Free

Updated May 14, 2026
Share & Support

What's included

Features

Instant live conversion — TypeScript interfaces update as you type JSON
interface vs type alias output — choose your codebase's preferred style; both produce identical runtime behavior for object shapes
Recursive nested object support — each object at any depth generates its own PascalCase-named interface with the parent referencing it by name
Smart array handling — arrays of objects merge all elements into one unified interface, catching optional fields that appear in some elements but not others; use the JSON Formatter to pretty-print API responses before pasting here
Optional fields toggle — adds ? to every property for partial types, partial update payloads, or APIs that may omit fields
Null safety control — choose between null, unknown, and any for null JSON values to match your tsconfig and safety requirements
Export keyword toggle — turn off for module-internal types, turn on (default) for shareable types that can be imported across your project
Array syntax: T[] (concise, idiomatic) or Array<T> (explicit, readable in complex generics)
Customizable root interface name — rename from the default Root to ApiResponse, UserProfile, or whatever matches your domain model
Syntax-highlighted TypeScript output — keywords, type names, primitives, and punctuation in distinct colors for easy scanning
Copy to clipboard + Download as .ts file — drop directly into your types/ folder; pair with the JSON Table Viewer to inspect the actual data while typing against your new interfaces
100% client-side — no server, no account, works offline; your API responses never leave the browser

About this tool

Generate TypeScript Interfaces from JSON Instantly — No Install, No Sign-Up

Runs in your browser
No install or signup
Free forever

You just got an API response back and now you need to write TypeScript interfaces for it. If it has five nested objects and three arrays, that is twenty minutes of tedious typing — and you have to get every field name exactly right or your code won't compile. Paste the JSON here and get the interfaces in two seconds.

The generator walks your entire JSON tree recursively. Every nested object becomes its own named interface. Arrays of objects get a unified interface covering all keys that appear across every element. Property types are inferred directly from the values: string, number, boolean, null, and arrays — with union types for mixed arrays.

Two output modes give you control over TypeScript style. interface is the traditional choice for describing object shapes and is open for extension through declaration merging. type (type alias) is stricter by default and works better for mapped and conditional types. For plain API response shapes both are functionally identical — pick the style your codebase uses.

The null as setting matters for correctness. When a JSON value is null, TypeScript needs a type. Setting it to null (the default) is the most accurate representation and works with strictNullChecks. Setting it to unknown is the safest choice for untrusted API data — TypeScript will force you to check the value before using it. Setting it to any skips type checking entirely, which is the least safe but most permissive option.

All conversion runs entirely in your browser — no server, no sign-up, works offline. Paste your JSON, adjust the options to match your codebase conventions, and download the .ts file.

Step by step

How to Use

  1. 1
    Paste your JSON into the left panelPaste any JSON object or array into the left input panel. TypeScript interfaces appear instantly in the right panel as you type — no button press required. Click Sample to load a realistic example with nested objects, arrays, and null values to see all the generated interfaces.
  2. 2
    Set the root interface nameChange the Root name field in the header to whatever your top-level type should be called — ApiResponse, UserPayload, OrderData. Nested object keys derive their own names automatically: a "user" key becomes User, "shippingAddress" becomes ShippingAddress, "posts" array items become Post.
  3. 3
    Choose interface or type alias outputClick interface to generate interface Root {} declarations (open for extension via declaration merging). Click type to generate type Root = {} aliases (closed by default, more flexible for unions and mapped types). For plain API response shapes both are functionally identical — pick your codebase's preferred style.
  4. 4
    Control array syntax and null handlingToggle between T[] (concise, idiomatic) and Array<T> (explicit, useful in complex generics) for array types. Use the null as control for null JSON values: null (most precise, requires strictNullChecks), unknown (safest for untrusted external data), or any (disables type checking for that property).
  5. 5
    Enable optional fields or export keywordToggle optional to add ? to every property (name?: string) — use for partial update types or APIs that may omit fields. Toggle export to add the export keyword to every interface (on by default) so they can be imported anywhere in your project.
  6. 6
    Copy to clipboard or download the .ts fileClick Copy in the output panel header to copy all generated interfaces to your clipboard. Click Download .ts to save the file directly to disk. Drop it into your project's types/ folder and import the interfaces wherever you need type-safe access to the API data.

Real-world uses

Common Use Cases

🔌
Type an API response in seconds instead of minutes
You called a REST API and got back 200 lines of nested JSON. Instead of writing interfaces by hand — getting field names wrong, missing nested types, forgetting nullables — paste the response here and get complete TypeScript interfaces in under two seconds. Pair with the API Request Generator & Tester to make and capture the API call in the same browser tab.
🗂️
Generate types for a JSON config file or schema
Application configs, feature flag payloads, Stripe webhook events, and Slack API objects are all JSON. Paste any of them here to generate TypeScript interfaces for type-safe config access and event handling. Use the optional toggle if the config has fields that vary by environment.
⚡
Bootstrap a new TypeScript project's type layer
Starting a new TypeScript project that consumes an existing API? Hit every API endpoint once, paste each response here, and collect all the generated interfaces into a types/ folder. You'll have a complete, accurate type layer in minutes rather than hours.
🧪
Write typed test fixtures and mock data
Paste a JSON fixture or mock response that you use in tests. Generate the TypeScript interface for it and annotate your fixture with the type — TypeScript will catch the moment a test fixture drifts from the real API shape. Use the Diff Checker to compare old and new API response shapes when the API changes.
📋
Convert JSON Schema or OpenAPI example objects to TS types
OpenAPI specs and JSON Schema documents include example objects in JSON. Paste example response bodies here to quickly scaffold TypeScript types for each schema component. Faster than reading through the spec and writing interfaces manually.
🛠️
Validate third-party data structures before using them
When integrating with a third-party SDK or webhook that sends JSON, paste a real payload here to understand and type its structure. Use unknown as the null-as setting for untrusted external data, which forces explicit type checks in your code before accessing nullable fields.

Got questions?

Frequently Asked Questions

Paste your JSON into the left input panel — TypeScript interfaces appear instantly in the right panel. Click Copy or Download .ts to use the output.

JSON strings → string, numbers → number, booleans → boolean, null → null / unknown / any (your choice), arrays → T[] or union types, nested objects → separate named interfaces.

Each nested object generates its own interface. The name is derived from the JSON key in PascalCase — "userAddress" becomes UserAddress. Parent interfaces reference child interfaces by name.

Arrays of objects are merged — all items are combined into one interface covering every key across all elements. The interface name is singularized from the array key (users → User, posts → Post).

interface supports declaration merging (useful for library types). type is closed by default and more flexible for unions and mapped types. For plain object shapes from JSON, both are functionally identical — pick whichever your codebase uses.

It adds ? to every property (key?: type), making all fields optional. Use it for partial update types or APIs where fields may be absent.

null is the most precise type and works with strictNullChecks in tsconfig. unknown is the safest choice for untrusted external data — TypeScript forces you to check the value before using it. any skips type checking entirely.

Yes. If your JSON is an array like [{...}, {...}], the tool generates an interface for the element type using the singularized root name. The root type is Root[] (or whatever you named it).

Yes. Download the .ts file and drop it into your types/ folder. With the export toggle on (default), all interfaces are exported and can be imported anywhere in your project.

Completely free, no sign-up. All conversion runs in your browser — no data is sent to any server. You can safely paste sensitive API responses or private data structures.