Why does the output use `Record ` for empty objects?

When the generator encounters an empty object {} the JSON sample provides no keys to infer, so the safest fallback is `Record `. Provide a richer sample that includes the actual keys to get a typed nested interface instead.

JSON to TypeScript Converter Online — Generate Interfaces

Generate strict TypeScript interface definitions from any JSON payload — typed scalars, nested interfaces, and arrays. 100% in your browser.

Input JSON

TypeScript Output

What is a JSON to TypeScript converter?

A JSON to TypeScript converter reads a JSON sample and emits typed interface definitions that mirror the JSON structure — typed scalars, nested interfaces, arrays. The output drops directly into a React, Vue, Svelte, Angular, or Next.js project and gives you autocomplete, refactor safety, and compile-time guarantees on API responses.

Hand-typing a 30-property API response is tedious and lossy — the first typo breaks intellisense, the second goes unnoticed until production. OpenFormatter's converter walks the JSON, infers types, and emits idiomatic TypeScript ready to import.

How to generate a TypeScript interface from JSON — 4 steps

Paste a real response. The richer the sample, the better the inference. Avoid empty arrays and empty objects, which fall back to unknown.
Click Convert. The tool emits a Root interface and one nested interface per object level.
Copy into a .ts file. Drop into types/api.ts or wherever your project keeps API types.
Use the type at the boundary. Cast the JSON: const data = (await res.json()) as Root; or pass to useQuery generic.

JSON to TypeScript type mapping

Sample JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "isActive": true,
  "address": { "city": "London" },
  "tags": ["admin", "engineer"]
}

Generated TypeScript interfaces

interface Address {
  city: string;
}

interface Root {
  id: number;
  name: string;
  isActive: boolean;
  address: Address;
  tags: string[];
}

Strict TypeScript

Concrete types — no `any`. Booleans become boolean, numbers become number, nulls become null, nested objects become named interfaces.

Nested interfaces

Every nested object becomes its own interface so refactoring deep types is straightforward.

Client-Side Only

JSON is parsed in your browser. API responses with secrets, signed URLs, or PII never leave the device.

Common use cases

check_circleTyping fetch() / axios responses in a React or Vue SPA
check_circleGenerating Next.js Route Handler request and response body shapes
check_circleBuilding TanStack Query / SWR generic types for typed cache entries
check_circleGenerating types for a tRPC, GraphQL, or REST API response without codegen tooling
check_circleModelling Stripe, Slack, GitHub webhook payloads as strongly typed events
check_circleProducing Zod-friendly shapes — paste output then translate interface to z.object()
check_circleGenerating Redux / Zustand store slice types from a sample state
check_circleModelling Firestore or Supabase document shapes for type-safe selectors

Why client-side generation matters

API responses often contain user emails, payment tokens, internal IDs, and shapes that count as commercial IP. Sending them to a hosted converter is a no-go for many teams. OpenFormatter generates the TypeScript entirely in your browser — open DevTools → Network and click Convert; no requests are made.

More TypeScript & JSON tools

Format TypeScript, beautify JS bundles, or generate models for other languages — all browser-side.

TypeScript Formatter JS Beautifier JSON to Go

Frequently Asked Questions

interface vs type alias — which should I pick?

For modelling JSON either is fine. Use interface for object shapes that may extend or merge across files (declaration merging is interface-only). Use type for unions, intersections, mapped types, and conditional types. The generator emits interface by default because it is the most common and most extensible choice for API response shapes.

Are unions inferred from arrays of mixed types?

The generator infers the type from the first element only — arrays of mixed types fall back to the first element type. For real mixed arrays (e.g. (string | number)[]), edit the output by hand. A more sophisticated inference would walk every element and union the distinct types.

How should I handle optional fields?

JSON has only present-or-null. To mark a property optional in TypeScript add a "?" — e.g. `email?: string`. The generator marks fields whose sample value is null as `field: null`; change to `field?: string` once you know the real shape.

Will this work with strict mode?

Yes. The output uses concrete types without any. For nested objects it produces named interfaces; for null fields it uses `null` rather than `any`. If you enable `noUncheckedIndexedAccess`, beware that the generator does not yet add `| undefined` to optional fields — add manually where necessary.

How do I validate at runtime?

TypeScript interfaces are erased at compile time, so the JSON shape is not validated at runtime. For runtime validation, generate a Zod schema, an io-ts codec, or use a library like Valibot or Ajv against a JSON Schema. Type-only is fine when the JSON comes from a service you control.

Why does the output use `Record<string, unknown>` for empty objects?

When the generator encounters an empty object {} the JSON sample provides no keys to infer, so the safest fallback is `Record<string, unknown>`. Provide a richer sample that includes the actual keys to get a typed nested interface instead.

Is the JSON uploaded?

No. The conversion runs entirely in your browser. There is no network call when you click Convert — internal API contracts, tokens, and PII never leave the device. Verify in DevTools → Network.

Can I use these interfaces with React, Vue, or Next.js?

Yes. The output is plain TypeScript — drop it into any framework. For React, type a `useState<Root | null>(null)` or props with the interface. For Next.js API routes, type the request body and response body of `Route Handlers`. The interfaces work identically across all TypeScript projects.