Stop Hand-Typing TypeScript & Zod Schemas: How I Built a Chrome SidePanel API Mocker & Code Generator

MockShift Studio — Thu, 12 Nov 2026 06:59:15 +0000

While building frontend applications in React and TypeScript, two repetitive tasks always slowed me down:

Testing UI edge cases (500 Server Error, 401 Unauthorized, or 3000ms slow network latency) without modifying frontend code or setting up heavy proxy tools.
Manually writing TypeScript interface definitions and Zod validation schemas from deeply nested API JSON responses.

To solve both in a single workflow, I built API Craft Pro — a lightweight, 100% local-first Chrome SidePanel extension.

⚡ 1. Intercept Live XHR & Fetch Traffic in the SidePanel

Instead of constantly switching between the DevTools Network tab and your code editor, API Craft Pro streams your live fetch and XMLHttpRequest JSON payloads directly in the Chrome SidePanel alongside your web app.

🎭 2. Zero-Config API Mocking & Latency Simulation

With a single click on Convert to Mock, any captured API request becomes an active interception rule:

Override HTTP status codes (200, 201, 400, 401, 403, 404, 500)
Inject simulated network latency (0ms – 60,000ms) to test loading skeletons and timeouts
Edit the JSON response payload on the fly with instant syntax validation

🛠️ 3. Instant AST Code Generation (TypeScript, Zod, JSON Schema & Fetch)

Select any live API response (or paste custom JSON) to immediately generate:

Clean TypeScript Interfaces (with automatic nested object and union array inference)
Zod Schemas for runtime validation
Draft-07 JSON Schemas & Typed Async Fetch Functions

🔒 100% Local-First Privacy

All intercepted traffic and mock rules are stored strictly locally inside chrome.storage.local. Zero data ever leaves your browser.

🚀 Try It Out (Free)

The core live traffic sniffer, API mocker, and TypeScript interface generator are completely free to use!

👉 Install API Craft Pro from the Chrome Web Store