JSON to TypeScript Types
Generate TypeScript interfaces from a JSON sample — nested types, arrays, optional keys inferred.
Tool code processes selected files and entered content in your browser and does not submit them to a TOOLGRID processing endpoint. TOOLGRID measures tool usage, not the content you enter.
Loading tool…
Browser-basedWhat this tool does
In-browser JSON to TypeScript type generator. Walks any JSON sample and emits export interfaces with merged array shapes and union types.
Nested objects each get their own interface, named in PascalCase from the key that holds them. Mixed-value fields produce union types (string | number). Arrays of objects with heterogeneous shapes get merged into a single interface with the rare fields marked optional — instead of emitting N separate interfaces or one big union.
Useful for: typing an external API response, scaffolding types from a JSON fixture, onboarding TypeScript on a JavaScript codebase that has known JSON samples, or seeding a type-driven validator (with Zod, Valibot, or io-ts written from the inferred shape).
What you can do with this tool
Curl the API once, paste the JSON response in, and use the output as a starting point for your fetch/SWR/React Query type parameter. Adjust unions and optional flags as you discover edge cases.
When introducing TypeScript on an existing codebase, paste a sample of your JSON config (tsconfig-like, custom feature flags, etc.) to get a typed shape you can refine.
The interfaces give you the structure; from there you can hand-translate each field to a Zod validator (z.string(), z.number(), z.object({...})). Faster than starting from scratch.
What to check before relying on the result
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
How to use
- 1
Set a root type name (defaults to "Root") — this names the top-level interface in the output.
- 2
Paste your JSON sample into the input area. Output regenerates live as you type.
- 3
Copy the generated interfaces into your codebase.
Use Cases
Curl the API once, paste the JSON response in, and use the output as a starting point for your fetch/SWR/React Query type parameter. Adjust unions and optional flags as you discover edge cases.
When introducing TypeScript on an existing codebase, paste a sample of your JSON config (tsconfig-like, custom feature flags, etc.) to get a typed shape you can refine.
The interfaces give you the structure; from there you can hand-translate each field to a Zod validator (z.string(), z.number(), z.object({...})). Faster than starting from scratch.
When writing tests, you often have a fixture JSON. Generate the interface so your test helpers can be typed against the fixture shape without manually writing out 40 fields.
Capture one webhook payload, paste it in, and embed the TypeScript interface in your README or runbook. Future readers (and your future self) understand the shape at a glance.
Tips & Tricks
If your array has objects like <code>[{a:1, b:2}, {a:1, c:3}]</code>, the tool emits ONE interface with all three fields, marking <code>b</code> and <code>c</code> as optional. This matches what you usually want when typing API responses where some fields are present only sometimes.
A literal <code>null</code> in the JSON produces a <code>null</code> type. If a field can be either string or null, the inferred type is <code>string | null</code>. To get an optional field instead, ensure the key is missing in the sample (rather than present with a null value).
When a JSON array is empty (<code>[]</code>), the tool can't infer the element type and emits <code>unknown[]</code>. Add a representative sample element to the array before running the conversion to get a real element type.
Inferred names come from PascalCase'd field names (<code>addresses</code> → <code>Address</code> for array elements). For polished code, you may want to rename top-level interfaces to match your domain language — find-and-replace in your editor takes seconds.
FAQ
Does the tool run entirely in my browser?
Parsing uses JSON.parse and type inference is pure JavaScript in your browser. Tool code does not submit entered JSON to a TOOLGRID processing endpoint. Review browser extensions and device security before handling sensitive payloads.
How are mixed-type arrays handled?
Arrays with heterogeneous primitive types produce union types — e.g., <code>[1, "two"]</code> becomes <code>(number | string)[]</code>. Arrays of objects with different shapes are merged: the tool collects the union of all keys, marks rare keys as optional, and emits ONE interface for the array element rather than a union of N similar interfaces.
What about TypeScript-specific features like literal types?
The tool emits broad primitive types (string, number, boolean) rather than literal types ("alice", 42, true). For an API response where a status field is one of "ok" / "error" / "pending", you'll get <code>string</code> — narrow it manually after generation if you want exhaustive typing.
How does it handle JSON with very deep nesting?
Each parsed object level can produce another interface, and colliding names receive a numeric suffix. Deep or very large samples can exceed parser call-stack or browser-memory limits, so use a representative subset when generation slows or fails.
Can I use the output with strict TypeScript?
Yes — the output uses <code>export interface</code> and is compatible with strict mode out of the box. The only TypeScript-specific liberty is <code>unknown[]</code> for empty arrays (instead of <code>any[]</code>), which is the strict-friendly choice.
What if my JSON has invalid syntax?
The tool reports the parse error inline so you can fix the input. Common causes: trailing commas, unquoted keys, single-quoted strings, comments — all of which are valid JavaScript but not valid JSON. Use our JSON Formatter to validate and pretty-print before generating types.
Does it generate Zod or runtime validators?
No — only TypeScript types. For runtime validation, port the inferred shape to Zod (z.object({...})), Valibot, io-ts, or similar by hand. There are also dedicated JSON-to-Zod tools if you specifically want runtime schemas.
Useful next steps
Open a nearby browser tool when you need to validate, convert, or reuse the result.