Local JSON to TypeScript converter
Paste a JSON payload and get TypeScript interfaces that match the structure: nested objects become separate named interfaces, arrays become typed arrays, mixed-type arrays become union types, and nullable or missing fields become optional. The output is ready to copy into a project, with controls for the root name, interface vs type alias style, readonly fields, and unknown handling for empty arrays. Everything is parsed locally; your JSON is never sent anywhere.
No data leaves your browser. The output is a best-effort inference from a single JSON sample — review unions and optional fields before shipping.
What a JSON to TypeScript converter does for your project
TypeScript projects need to know the shape of external data the moment it arrives. Whether it comes from a REST endpoint, a webhook, a database, a configuration file, a job queue or a Large Language Model response, the safest move is to describe the JSON with an explicit type, then let the compiler catch every silent rename, every missing field and every wrong primitive. Writing those interfaces by hand for a 200-line payload is slow and error-prone. A converter that infers the shape from a sample JSON saves time and produces a baseline you can refine instead of starting from nothing.
This converter parses the JSON you paste in your browser and walks the object tree to produce a clean set of TypeScript declarations. Nested objects become separate named interfaces so the top-level type stays readable. Homogeneous arrays become T[], heterogeneous arrays become union types (for example (string | number)[]). Fields that appear as null in the sample become optional with ?:, become unions with | null, or stay as a literal null depending on the option you pick. The output is pure TypeScript that compiles in any project from a small Node script to a large Next.js codebase.
How JSON to TypeScript inference works
The conversion happens in four steps. First, the page parses the JSON string with JSON.parse to verify the input is valid and to materialise the object graph in memory. Second, it walks the graph depth-first, attaching a path to each value (root.users[0].profile.age for example) so the eventual interfaces are named after their location in the tree. Third, it maps each value to a TypeScript type: string, number, boolean, null, unknown for empty arrays, an inline shape for objects, or a derived union for mixed arrays. Fourth, it deduplicates structurally identical objects so two array elements with the same fields share a single interface, and it renders the final file with consistent indentation, optional readonly markers and either interface or type syntax.
- Validate the JSON: the parser highlights the line and column of any syntax error so you can fix the input quickly.
- Detect primitive types: every leaf becomes a TypeScript primitive. Numeric values can optionally be turned into a literal type for stricter enums.
- Detect optional and nullable fields: fields that are
nullin the sample, or that appear in some array items but not others, become optional automatically. - Detect arrays and unions: an array of objects with the same keys gets a shared interface; an array of mixed primitives gets a union; an empty array becomes
unknown[]by default. - Render the output: top-level type first, helper interfaces sorted alphabetically, comments preserved when relevant, and a trailing newline for clean diffs.
Common use cases for a JSON to TypeScript converter
- Wrapping a third-party REST API. You receive a sample response from a vendor and you want to type the client immediately. Paste the response, get the interface, paste it into your
api.tsfile, refine the optional fields once you have read the documentation. - Mapping a database query. A
SELECTresult returns a row shape. The converter gives you the matching interface so the result of your query function is fully typed. - Validating a JSON config file. Many tools, from ESLint to Vite, are configured through JSON. Generating the interface lets your build script enforce the shape and catch broken fields at compile time.
- LLM structured output. When you ask a model for a JSON response, the easiest contract is a TypeScript interface. The converter generates that interface from a representative sample and you paste it into the system prompt or use it as a Zod schema source.
- Webhook payloads. Stripe, GitHub, Slack and others publish webhook examples. Converting them to interfaces makes your handler safe and documents the expected shape directly in the code.
- Migrating from JavaScript to TypeScript. When porting a Node service to TypeScript, the slowest part is typing the legacy data structures. The converter turns this into a paste-and-edit task instead of a typing marathon.
- Sharing types between frontend and backend. A single canonical JSON sample becomes a shared interface that both sides import, eliminating an entire class of API drift bugs.
Limitations and review tips
A converter that sees only one JSON example cannot know which fields are truly required and which are optional for the whole API. If the sample contains "middleName": "Anne", the converter assumes middleName is always a string. In the real world, the field may be missing for half the users. Before shipping the generated interface, run the converter on at least two or three representative samples, or cross-check the API documentation, and add ?: to fields you know can be absent. The same caution applies to literal types: "role": "admin" looks like an enum but the API may also return "manager", "viewer" and others. The literal-string option is useful for closed sets, less useful when the values are user input.
The converter runs entirely in your browser using JSON.parse and a small inference routine. Your JSON is never uploaded, logged or transmitted; you can paste production payloads, customer data or unreleased schemas safely. For ongoing validation at runtime, pair the generated interface with a schema library like Zod, Valibot, ArkType or io-ts so that data parsed from the network is checked against the same shape the compiler enforces statically.
Frequently asked questions
Why does the converter sometimes mark a field as optional?
If a field is null in the sample, or if it appears in some objects of an array but not in others, the converter marks it as optional with ?: by default. You can change the behaviour to T | null in the options to keep the field required while allowing null.
How does the converter handle arrays of mixed types?
Arrays of homogeneous primitives become string[], number[] or boolean[]. Arrays of mixed primitives become a union, for example (string | number)[]. Arrays of objects with the same keys share a generated interface so the array becomes User[] rather than an anonymous inline shape repeated many times.
What does the literal strings option do?
Without it, "role": "admin" becomes role: string. With it, the same field becomes role: "admin". Useful when the value is part of a fixed set; you then expand the type to a union like "admin" | "editor" | "viewer" by hand.
Can I use the output with Zod or Valibot validators?
Yes. The generated TypeScript is plain syntax so any Zod, Valibot or ArkType schema can mirror it. A common workflow is to keep the inferred interface as documentation, then write a Zod schema that produces the same type via z.infer<typeof schema>. The two stay in sync because they describe the same structure.
Is the JSON sent to your server?
No. The converter is 100% client-side. The JSON is parsed by your browser’s JSON.parse and the inference happens in memory. There is no fetch, no logging, no analytics tag tied to the input. You can paste payloads with secrets, customer data or pre-release schemas without exposing them.
Should I prefer interface or type for generated declarations?
For shapes that may be extended or merged across declaration files, prefer interface. For unions, intersections or mapped types, use type. The converter supports both via the Style dropdown. The output is structurally equivalent; pick the style your team is already using in its codebase.
Related tools and resources
Typing JSON is one step in a wider data-handling workflow. The tools below help validate, format and explore JSON payloads, and complement TypeScript generation.
