Turn a JSON sample into ready TypeScript types
You have a JSON response from an API and you need a TypeScript type for it. Right now. Without writing every field by hand, without missing a nested object three levels deep, without forgetting that the field is sometimes `null`. Paste the JSON on the left, get a clean `interface` on the right.
The generator detects nested objects and gives each one its own named type. It walks arrays, picks the element type, and emits `User[]` instead of one long inline shape. If keys are sometimes missing or sometimes null, it adds a `?` marker. If your array contains objects with slightly different fields, it merges them into one super-shape and marks the differences as optional.
Four output formats: a TypeScript `interface`, a TypeScript `type` alias, a Zod runtime schema (with `z.infer` for the static type), or a JSON Schema document (for OpenAPI, AJV, contract testing). Everything runs in your browser, nothing leaves your device.
How to use it
- Paste your JSON into the left pane. The default sample is a typical API order response so you can see the generator working right away.
- Pick an output format: interface (the everyday one), type alias (for unions or mapped types), Zod (when you need runtime validation as well), or JSON Schema (for OpenAPI specs and contract tests).
- Set the root type name (default `Root`). Good names: `User`, `Order`, `ApiResponse`. The generator uses your name for the top-level type and derives child names from the keys (e.g. `customer` becomes `Customer`).
- Turn on `unknown` over `any` for safer types: empty arrays become `unknown[]` instead of `any[]`, the type system forces you to narrow before use.
- Mark optional based on null if your API sends `"phone": null` sometimes: the generator adds `phone?: string` instead of `phone: string | null`. Turn it off if you want explicit null in the type.
- Convert keys to camelCase if your JSON uses snake_case (`created_at`) and your TypeScript code uses camelCase (`createdAt`). The original key stays in a comment so you remember what came over the wire.
- Merge similar shapes when an array contains objects with slightly different fields. Without it you get a verbose union; with it you get one clean shape with `?` markers on the differences.
- Click `Copy` to put the result on your clipboard or `Download` to save it as a `.ts` file (or `.json` for JSON Schema). Paste it into your project, done.
When this is useful
Five situations where this saves you 10 minutes of manual typing:
- Wiring up a new API endpoint. You hit `/api/orders` and get a fat JSON response back. You paste it here, get `Order`, `Customer`, `Item` interfaces in three seconds. You drop them in `types.ts`, your code now autocompletes every field correctly.
- Migrating untyped JavaScript to TypeScript. The old code reads JSON files and assumes the shape. You paste one example here, get the types, paste them at the top of the file: the compiler finds every place that touches a missing or wrong field.
- Building a Zod schema for a form. You know the shape you want (from a sample JSON), you need runtime validation. Switch to Zod mode, get `z.object({...})` with the right primitive validators, drop it into your form library (React Hook Form, Formik, TanStack Form).
- Writing an OpenAPI spec from a real response. The backend already returns JSON, you need to describe it in OpenAPI. Switch to JSON Schema mode, get a Draft 2020-12 document with `$defs`, paste it under your endpoint's response section. Done.
- Sharing a contract with a frontend team. You have a JSON payload, you need to tell the other side what to expect. Generate the interface, paste it into a Slack message or a doc, both teams have the same source of truth.
Working from a real spec? Use OpenAPI to TypeScript for full request/response types or GraphQL to TypeScript for SDL.