Convert JSON to TypeScript
interfaces. Nested,
typed, ready to use.
Generate TypeScript interfaces from any JSON sample. Nested objects become separate interfaces, null values become optional fields, arrays get their item type inferred. Runs entirely in your browser.
field?: type).
No external library — runs on vanilla JS.
Three steps — paste a sample and drop the interfaces into your project.
Use a real API response where all fields are present with non-null values. The generator infers types from values — a null field becomes optional (field?: unknown). For best results, use the most complete instance you have available.
Enter the root interface name (e.g. User, ApiResponse). Choose between interface and type alias output. Toggle readonly for immutable data structures, and enable camelCase conversion if your JSON uses snake_case keys from a backend API.
Click Generate and copy the TypeScript interfaces directly into your project — or download as a .ts file. The interfaces are ready to use with fetch(), axios, React state, Redux store or any TypeScript codebase.
The type inference rules the generator applies to each JSON value.
| JSON value | TypeScript type | Notes |
|---|---|---|
"Alice" |
string |
All JSON strings become string. Add as const manually for literal types. |
42 / 98.5 |
number |
Both integers and floats map to number — TypeScript has no separate integer type. |
true / false |
boolean |
Direct mapping. |
null |
field?: unknown |
Null in the sample means the actual type is unknown — field becomes optional. Refine manually after generating. |
["a", "b"] |
string[] |
Item type inferred from first element. Empty array → unknown[]. |
[{…}, {…}] |
ChildName[] |
Array of objects → separate interface + typed array. |
{…} |
ChildName |
Nested object → separate named interface derived from the key in PascalCase. |
Common front-end and full-stack workflows.
When fetching data from an API in TypeScript, the response is typed as any by default. Generating an interface from a real response sample gives you full autocomplete and type safety for the entire response structure — without writing types by hand.
React component props and useState hooks require typed interfaces. Generating from a sample API response or a config object gives you a starting point for the prop or state type — ready to pass to React.FC<Props> immediately.
Prisma, Supabase and Drizzle return query results as typed objects, but sometimes you need to type raw JSON from a jsonb column, a Redis value or a third-party integration. Generating from the actual stored value gives you accurate types.
When building a client SDK for an API, you need a TypeScript interface for every request and response shape. Generating from the API documentation examples — or from real responses in Postman — produces an interface file you can ship directly in the SDK package.
TypeScript generated
in your browser. No upload.
The entire interface generation runs in JavaScript locally. Your JSON is parsed and traversed entirely in your browser — it is never transmitted to any server, never stored, and gone the moment you close the tab.
The generated code follows TypeScript conventions: PascalCase interface names, camelCase field names, correct type inference for all JSON value types, and separate named interfaces for nested objects — exactly matching what you would write by hand.