JSON to TypeScript and Zod
Paste your API response and get TypeScript interfaces or a Zod schema ready for runtime validation.
export interface Root {
id: number;
username: string;
email: string;
website: string;
createdAt: string;
verified: boolean;
rating: number;
roles: string[];
profile: Profile;
orders: Order[];
stock: Record<string, StockItem>;
}
export interface Profile {
displayName: string;
avatar_url: null;
bio: string;
}
export interface Order {
id: string;
total: number;
items: number;
coupon?: string;
}
export interface StockItem {
qty: number;
}
How types are inferred and limits
- A field is optional when it is missing from any object in the same array or sample set.
- Types come only from the data: if a field is always null its type is null. Add more samples to refine it.
- An object is treated as a dictionary when all its keys are numbers, UUIDs or ObjectIds.
- Output is verified by compiling with tsc and validating test samples with Zod 4; Zod 3 syntax follows the official docs.
- Everything happens in your browser: the JSON is never sent to a server.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Hand-writing types for an API response is slow and error-prone, and a TypeScript type does not protect you if the server returns something else in production. This generator covers both sides: it creates interfaces for your editor and, if needed, the equivalent Zod schema to validate data at runtime and infer the type from it. It inspects every item in each array to know which fields are optional, detects formats such as email or UUID and avoids duplicate names. Every output is checked by compiling with tsc and validating the test samples with Zod.
Features
- ✓Output as TypeScript interface or type and Zod v4 or v3 schemas
- ✓Optional fields detected by merging every object in an array
- ✓Type unions and null when a field changes type across samples
- ✓Dictionaries with numeric, UUID or ObjectId keys turned into Record
- ✓Zod validation for email, URL, UUID, ISO date and datetime detected in the data
- ✓PascalCase names from snake_case or kebab-case, singular array items and no collisions
- ✓Reuses structurally identical types or generates one per field, your choice
- ✓Options for readonly, export, Array<T>, T | undefined, inline types and strict objects
How do I convert JSON to TypeScript?
- 1
Paste the JSON
Paste an API response or load a .json file. The more examples it includes, the more accurate the optional fields.
- 2
Choose TypeScript or Zod
Select the output and the root type name.
- 3
Adjust the style
Choose interface or type, readonly, Array<T>, inline types, Zod version, formats or strict objects.
- 4
Copy or download
Copy the generated code or download it as a .ts file for your project.
Frequently asked questions
How does it decide which fields are optional?
It walks every object in the same position, for example each item in an array. If a key is missing from any of them, it is marked optional. With a single object there is no way to know, so every field is required.
Why also generate a Zod schema?
Because TypeScript types disappear at compile time. Zod validates real data at runtime and gives you the type through z.infer, so the type and the validation never drift apart.
What is the difference between Zod 3 and Zod 4 output?
Zod 4 uses top-level validators such as z.email(), z.url() or z.iso.datetime() and z.strictObject(). Zod 3 uses z.string().email() and .strict(). Pick the one that matches the version installed in your project.
What is dictionary detection?
If an object's keys are numeric ids, UUIDs or ObjectIds, it is usually a map with variable keys. Instead of creating one property per id, it generates Record<string, T> with the merged value type.
Can I convert several samples at once?
Yes. Put the samples inside an array and enable "Root array holds separate samples". The resulting type merges all of them and marks fields missing from any sample as optional.
Is my JSON sent to a server?
No. Generation runs in your browser, so you can use real responses with private data.
Related tools
Embed JSON to TypeScript and Zod on your site
Add JSON to TypeScript and Zod to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/json-to-typescript"
width="100%"
height="700"
frameborder="0"
title="JSON to TypeScript and Zod — miguelacm.es"
></iframe>