Mock API server

Input
Output

Mock API Server

Write the routes your front end needs, each with the JSON it returns, and press Start: Bracely's service worker answers them at /mock/… in this browser, so you can build against an API that doesn't exist yet. Path parameters, status codes, delays and one item from a list by its id all work.

Example: an orders API before the backend exists

Four routes. The list of orders also answers /orders/{id} with one order, and {{id}} in the tracking route is filled in from the address:

Routes

{
  "GET /orders": [
    {
      "id": "ORD-20419",
      "status": "paid"
    },
    {
      "id": "ORD-20420",
      "status": "pending"
    }
  ],
  "POST /orders": {
    "status": 201,
    "body": {
      "id": "ORD-20421",
      "status": "pending"
    }
  },
  "GET /orders/{id}/tracking": {
    "order": "{{id}}",
    "status": "in transit"
  },
  "DELETE /orders/{id}": {
    "status": 204,
    "body": null
  }
}

Output

GET · https://bracely.saurabhpagrut.in/mock/orders · 200 ·  · 
POST · https://bracely.saurabhpagrut.in/mock/orders · 201 ·  · 
GET · https://bracely.saurabhpagrut.in/mock/orders/{id}/tracking · 200 ·  · 
DELETE · https://bracely.saurabhpagrut.in/mock/orders/{id} · 204 ·  · 
GET · https://bracely.saurabhpagrut.in/mock/orders/{id} one item from /orders · 200 ·  ·

How do I use the Mock API server?

  1. Write routes as JSON keys, like "GET /orders" and "POST /orders", each with the body it returns, or {"status": 201, "body": …}.
  2. Press Start the mock.
  3. Call /mock/orders from API request, API tests, fetch() in DevTools or a new tab; press Stop when you're done.

What does the Mock API server do?

  • Any method, status and delay
  • {id} in paths, {{id}} in bodies
  • /orders/{id} from a list, without writing it

When to use the Mock API server

Front-end work often waits on a backend that isn't ready, or is down, or is slow to set up. A mock gives you the API's shape now. Most mock servers need Node, a config file or an account; this one runs in the browser tab you already have open, through the same service worker that makes Bracely work offline.

Each key is a route: GET /orders, POST /orders, DELETE /orders/{id}, or just /ping for a GET. The value is the body to return, or {"status": 201, "body": …, "headers": {…}, "delay": 500} for more control. {id} or :id in a path matches any value, and {{id}} in the body is filled in with it. A GET route that returns a list of objects with ids also answers /orders/{id} with one item, or 404 when there's none. POST routes answer 201 unless you set a status. An address with no route answers 404 with the list of routes.

Frequently asked questions

Can curl or my phone reach the mock?
No. The service worker answers requests from this browser only: Bracely's tabs, its API request and API tests tools, and fetch() in DevTools on this site. Nothing is put on the internet. For a mock other machines can reach, run a mock server such as Prism or json-server.
Does it remember what I POST?
No, every answer comes from the routes as written, so a POST doesn't add to the GET list. That keeps it predictable; change the routes and press Update the mock to change what it returns.
Is my data uploaded?
No. Bracely runs entirely in your browser, so nothing you paste or open leaves your device.

More JSON tools

Bracely has 104 JSON tools in one page. Related ones:

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated · Version 6.1 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram