Developer utility

JSON & API Mock Engine

Paste JSON to generate TypeScript interfaces, Zod schemas, and JSONPath queries — entirely in your browser.

Input JSON

export interface Profile {
  email: string;
  score: number;
}

export interface Root {
  id: number;
  name: string;
  active: boolean;
  roles: string[];
  profile: Profile;
}

About this tool

What is the JSON & API Mock Engine?

Paste any JSON payload and instantly derive TypeScript interfaces, Zod schema source, and JSONPath listings. Everything runs in your browser — ideal for API mocking, contract sketching, and prompt prep without uploading secrets.

Teams often juggle three representations of the same payload: the wire format (JSON), the compile-time contract (TypeScript), and the runtime validator (Zod). Hand-syncing those layers is where drift and production bugs start. This engine collapses that loop into one paste: you keep a single source of truth in JSON and regenerate the typed surfaces you need for Next.js route handlers, React forms, and LLM tool schemas.

Deep dive

Runtime type safety with TypeScript and Zod inference

Why interfaces alone are not enough

TypeScript interfaces disappear at compile time. They catch mistakes in your own code, but they cannot verify that a third-party API, webhook body, or LLM tool call actually matches the shape you assumed. Zod (and similar schema libraries) reintroduce checks at the boundary: parse once, then work with a typed value that has already been validated.

How this tool helps you compile that pipeline

The client-side transformation pipeline is intentional and inspectable:

Parse — validate the pasted string as JSON into a plain object graph.
Walk — recurse objects and arrays, inferring primitives, nulls, and nested shapes.
Emit TypeScript — generate interfaces for IDE autocomplete and compile-time contracts.
Emit Zod source — produce schema code you paste into a project that already depends on zod for runtime parse + inferred types via z.infer<typeof Schema>.
List JSONPath — surface selectors for deep fields used in tests and scrapers.

Starting from a real sample payload — a successful REST response, a fixture from Postman, or a mocked GraphQL field — keeps the inferred types honest. Client-side inference here means the browser derives shapes from values you already trust enough to paste; it does not run the live Zod validator until you wire the emitted schema into your app.

Because generation never leaves the tab, you can safely paste staging payloads that contain tokens or PII placeholders without shipping them to a third-party codegen SaaS. Treat the output as a starting scaffold: refine optional fields, branded types, and refinements for your domain after you paste into the repo.

How to use it

Typical workflow

Paste a representative JSON sample (prefer production-shaped fixtures with realistic nulls and arrays).
Review the generated TypeScript interfaces and adjust names if the heuristic labels are too generic.
Copy the Zod schema into your API boundary or form parser; add .refine() rules for business logic.
Use JSONPath output when asserting nested values in tests or documenting queryable fields for consumers.

FAQ

Frequently asked questions

Does this send my JSON to a server?

No. Parsing and codegen execute entirely client-side. No tool-specific network requests are made for your input.

Is the Zod output a live validator?

The tool emits Zod schema source you can paste into a project that already depends on zod. It does not load Zod in the browser.

Can I use this for OpenAPI or mock servers?

Yes as a bootstrap. Generate types and schemas from a sample response, then wire them into MSW handlers, contract tests, or documentation. It is not a full OpenAPI editor.