How to Auto-Generate TypeScript Types & Zod Schemas from JSON
Learn how to instantly convert raw JSON API payloads into strict TypeScript interfaces and runtime Zod validation schemas with zero server transmission.
Interactive JSON to TypeScript Generator
Live Interactive SandboxParses primitive and array types into clean TypeScript interfaces. Test the preset input below or customize it before launching into the full workspace.
Modern frontend and backend engineering in Next.js, Node.js, and React requires strict type safety. When integrating third-party APIs (Stripe, GitHub, internal microservices), manually writing TypeScript interfaces for 50-field JSON payloads is tedious and error-prone.
Furthermore, static types provide zero runtime protection. If an API returns null instead of a string, your application will throw an uncaught runtime error.
This guide demonstrates how to generate static TypeScript types and runtime Zod validation schemas directly from JSON.
1. TypeScript Interface Generation
Given a raw API response:
{
"orderId": "ord_98765",
"totalAmount": 149.99,
"isPaid": true,
"customer": {
"name": "Sarah Connor",
"email": "sarah@cyberdyne.com"
},
"tags": ["express", "priority"]
}
The generated TypeScript interfaces:
export interface Customer {
name: string;
email: string;
}
export interface OrderResponse {
orderId: string;
totalAmount: number;
isPaid: boolean;
customer: Customer;
tags: string[];
}
2. Converting to Runtime Zod Schemas
To validate this payload dynamically at runtime (for example in Next.js Server Actions or Route Handlers):
import { z } from "zod";
export const CustomerSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
});
export const OrderResponseSchema = z.object({
orderId: z.string().startsWith("ord_"),
totalAmount: z.number().positive(),
isPaid: z.boolean(),
customer: CustomerSchema,
tags: z.array(z.string()),
});
// Automatically infer static TypeScript type from runtime schema
export type OrderResponse = z.infer<typeof OrderResponseSchema>;
3. Safe Parsing in Next.js API Routes
export async function POST(request: Request) {
const json = await request.json();
const parseResult = OrderResponseSchema.safeParse(json);
if (!parseResult.success) {
return Response.json(
{ error: "Validation Failed", details: parseResult.error.flatten() },
{ status: 422 }
);
}
// parseResult.data is 100% type-safe and validated
const order = parseResult.data;
return Response.json({ success: true, orderId: order.orderId });
}
Live Tool: JSON to TypeScript Interfaces
Client-Side EngineInstantly infer TypeScript interfaces and types from a JSON payload.