API Response Mocker

Join Amazon and Flipkart Deals and products under 99 Telegram Channel: @atjust99

What This Tool Does

When you're building a frontend and the API doesn't exist yet, you have a few options: hardcode JSON in your components, spin up a local mock server, or use a tool like this one. The API Response Mocker lets you configure an HTTP response (status code, headers, body, latency) directly in the browser and see exactly what your fetch call would get back.

No backend required. No localhost setup. Just define the response shape and test against it.

Building a Mock Response

A real HTTP response has three parts: a status line, headers, and a body. This tool lets you configure all three.

Status Codes

Pick from standard codes or type a custom one. The tool groups them by class:

• 2xx (Success): 200, 201, 204, etc.
• 3xx (Redirection): 301, 302, 304
• 4xx (Client Error): 400, 401, 403, 404, 409, 422, 429
• 5xx (Server Error): 500, 502, 503

Testing error paths is where mocking pays off the most. If you've never tested how your app handles a 429 with a Retry-After header, you probably should.

Headers

Add any HTTP header. The tool comes with quick-add buttons for common ones: Content-Type, Cache-Control, Authorization, X-Request-Id, and CORS headers. Custom headers work too — prefix them with X- by convention, though RFC 6648 technically deprecated that practice in 2012.

JSON Body

Type or paste your response payload. The editor validates JSON as you type and highlights syntax errors with line numbers. A "Prettify" button reformats minified JSON.

Tip: If you're mocking a paginated endpoint, make sure your response includes pagination metadata (total, page, per_page, next_cursor) that your frontend actually consumes. It's easy to forget those fields when mocking.

Latency Simulation

Real APIs don't respond instantly. Mobile networks add 100-300ms of latency. Overloaded servers can take seconds. The latency slider (50ms to 5000ms) lets you add artificial delay to the "Execute" action so you can test:

• Whether your loading spinner actually appears (many only show after 200ms+)
• How skeleton screens look in practice
• Whether your timeout logic triggers correctly

There's also a jitter option that adds random variance to the delay, closer to how real networks behave.

Response Templates

Instead of building from scratch, start from a template:

• Paginated List — includes data[], total, page, per_page fields
• Validation Error — a 422 with errors[] containing field-level messages
• Auth Token — a 200 with access_token, refresh_token, expires_in
• Not Found — a 404 with a standard error object

Templates load into the editor and you modify them to match your actual schema.

Integration Snippets

Once your mock is configured, the tool generates copy-paste code for:

• Fetch API — vanilla JavaScript, no dependencies
• Axios — popular in React/Vue projects
• Express.js — a Node route handler that returns your exact response, useful for setting up a quick mock server

The generated code includes the status, headers, and body you configured. It's a starting point, not a production-ready mock server.

When to Use a Browser Mocker vs. a Full Mock Server

This tool is best for quick prototyping: you're building a component and need to see how it handles specific response shapes. For shared team mocking, parallel development across multiple endpoints, or CI integration, you'll want a dedicated tool like Mockoon, MSW (Mock Service Worker), or Postman mock servers. Those persist your mocks, support routing, and can run headlessly in pipelines.

Frequently Asked Questions

Is this a real API endpoint I can call from my code? No. The tool simulates responses in the browser. It generates code snippets you can use, but it doesn't host a callable URL. For that, look at MSW or Mockoon.

Can I mock non-JSON responses? The editor is JSON-focused, but you can type any text into the body and set the Content-Type header to text/plain, application/xml, or whatever you need.

Is my data stored or logged? No. Everything runs client-side. Your payloads never leave the browser.

What's the "Data URL" feature? It encodes your entire mock configuration (status, headers, body) into a URL. Share it with a teammate and they'll see the same setup when they open it.

Can I simulate file uploads or multipart requests? Not currently. The tool focuses on JSON request/response flows.

What's the maximum body size? There's no hard limit, but browsers start to slow down with JSON payloads over a few MB. Keep it realistic — most API responses are under 100KB.

Related Tools

• API Tester - Test real API endpoints
• JSON Validator - Validate mock payloads before using them
• HTTP Header Analyzer - Audit response headers on live APIs
• Schema Converter - Generate TypeScript types from your mock JSON