JSON to TypeScript & Zod Converter
Paste JSON and instantly get clean TypeScript types and a matching Zod schema. Runs entirely in your browser — nothing is uploaded anywhere.
- Free · no signup
- Live preview
- Runs 100% in your browser
Paste JSON on the left and your typescript appears here instantly.
Convert JSON to TypeScript types and a Zod schema
Hand-writing TypeScript types for an API response is tedious and error-prone — and if you also want runtime validation, you end up maintaining the same shape twice. This free tool reads a JSON sample and generates both at once: a set of TypeScript interfaces (or type aliases) and a matching Zod schema, complete with a z.infer type so the schema stays your single source of truth.
It goes beyond a naive first-element conversion: objects inside arrays are merged, so a field that only appears in some records is correctly marked optional; null values become nullable; and string values that look like an email, URL, UUID, or ISO date-time are refined into the right Zod validator. Output is Zod v4-native by default, with a one-click switch back to Zod v3.
How it works
- 1
Paste a JSON sample — an API response, config file, or test fixture — into the editor on the left. Everything runs locally in your browser; nothing is uploaded.
- 2
The converter infers a structural type, merging every object in an array so a key missing from some elements becomes optional, and (optionally) detects string formats like email, URL, UUID, and ISO date-time.
- 3
Read the generated TypeScript interfaces on the TypeScript tab and the matching Zod schema — complete with a z.infer type export — on the Zod tab.
- 4
Tune the output — root name, interface vs type alias, readonly, format detection, and Zod v4 or v3 — then copy or download either file.
Frequently asked questions
What does this JSON to TypeScript converter do?
It reads a JSON sample and generates two things at once: TypeScript type definitions (interfaces or type aliases) that describe the shape of the data, and a matching Zod schema that validates the same data at runtime. You can copy or download either output and drop it straight into your project.
What is the difference between the TypeScript and Zod output?
The TypeScript output gives you compile-time types — great for editor autocomplete and catching mistakes while you code, but erased at runtime. The Zod output gives you a runtime validator that checks real data (API responses, form input) against the shape, plus a z.infer type so the schema doubles as your source of truth. Most teams use both: Zod to validate at the boundary, TypeScript types everywhere else.
Does it support Zod 4?
Yes. By default the schema is Zod v4-native, using the newer top-level string formats like z.email(), z.url(), z.uuid(), and z.iso.datetime(). If your project is still on Zod 3, flip the Zod v3 toggle to emit the classic z.string().email() style instead.
How does it decide which fields are optional?
When a value is an array of objects, the tool merges the shape of every element rather than looking only at the first one. Any key that is present in some elements but missing from others becomes optional (key?). A value that is null (or sometimes null) becomes nullable, so you get an accurate type even from messy, real-world samples.
Can it detect emails, URLs, UUIDs, and dates?
Yes. Format detection is on by default: string values that look like an email, URL, UUID, or ISO 8601 date-time are refined in the Zod schema (for example z.email() instead of a plain z.string()). Turn the “Detect formats” toggle off if you prefer unrefined z.string() everywhere.
Is my JSON uploaded anywhere?
No. The converter runs entirely in your browser using client-side JavaScript. Nothing you paste is sent to a server, logged, or stored — the types and schema are generated locally and copied or downloaded directly from your device.
Can I use the generated code in production?
Absolutely. The output is plain TypeScript and standard Zod, so you can paste it into any project and refine it — rename types, add refinements or defaults, tighten unknown fields — as your data model evolves.
More developer tools
Browse the full set of free, browser-based developer tools from jsmanifest, or read the latest JavaScript and TypeScript articles.