JSON Server: Mock REST APIs for Faster Frontend Development & Testing

One of the biggest hurdles in frontend development is waiting for the backend. You finish building the UI, but now you’re blocked until the backend APIs are ready. Sounds familiar?

As a frontend developer, you don’t want your progress to stop just because APIs aren’t available yet. That’s where JSON Server comes in. Think of it as your temporary backend — it lets you keep moving forward, build features, and test integrations without being dependent on the backend team.

With just a simple JSON file, you can instantly spin up a full REST API. No controllers, no database, no heavy setup. Just run one command and you’re good to go.

Why JSON Server?

Here’s why developers (myself included) love JSON Server:

→ Faster Frontend Development

Frontend teams don’t have to wait for backend APIs anymore. With JSON Server, you can:

• Start consuming mock APIs from day one.

• Build UI and integrate API calls in parallel.

• Avoid those dreaded “blocked by backend” delays.

→ Perfect for Testing (Integration & E2E)

While pure unit tests usually don’t need APIs, integration and end-to-end (E2E) tests often do. JSON Server shines here because:

• You get a predictable, consistent API that mimics real-world endpoints.

• Resetting data is as easy as editing a JSON file.

• No need to spin up heavy databases or backend services during CI/CD pipelines.

→ Rapid Prototyping

Need to demo your app to stakeholders but backend isn’t ready yet? JSON Server helps you fake it convincingly by persisting data in a file and exposing realistic REST endpoints.

→ Zero Config

All it takes is one file: db.json. JSON Server takes care of the rest.

→ Lightweight & Developer Friendly

No learning curve, just JSON + one command.

Setting Up JSON Server

Setting up JSON server is super easy, just follow the below steps:

1. Install globally:

npm install -g json-server

2. Create a db.json file:

{
  "posts": [
    { "id": 1, "title": "My first post" },
    { "id": 2, "title": "Hello JSON Server" }
  ]
}

3. Start the server:

json-server --watch db.json --port 3000

Your JSON server is up and running. http://localhost:3000/posts gives you a REST API with GET, POST, PUT, and DELETE support.

CRUD Example: Blog Posts App

To show JSON Server in action, we built a small React app that performs CRUD operations on blog posts. We’ll see how the UI changes and how db.json updates behind the scenes.

Setup

Clone the repo from Github:

git clone https://github.com/WaleedNaveed/blog-json-server.git

Go to project’s root directory and install packages:

npm install

Install JSON server:

npm install -g json-server

Run the project from project’s root directory:

npm run dev

The app will start at http://localhost:5173/

Once the app is up and running, we need to start the JSON server. Our db.json file is placed at the root of the project so, open a new terminal at the root of the project and start the JSON server:

json-server --watch db.json --port 3000

Once the JSON server is up, you’ll be able to see the following end-points:

http://localhost:3000/posts
http://localhost:3000/comments

Code Demo

Initially our db.json file looks like:

{
  "posts": [
    {
      "id": 1,
      "title": "Getting started with JSON Server",
      "body": "JSON Server gives you a full fake REST API in minutes.",
      "author": "Mark",
      "date": "2024-01-10T10:00:00Z"
    },
    {
      "id": 2,
      "title": "Why mock APIs speed up frontend development",
      "body": "Mock APIs let frontend work independently while backend is in progress.",
      "author": "David",
      "date": "2024-02-05T12:30:00Z"
    }
  ],
  "comments": [
    {
      "id": 1,
      "postId": 1,
      "author": "Sara",
      "body": "Nice intro — saved me time!",
      "date": "2024-01-11T09:00:00Z"
    },
    {
      "id": 2,
      "postId": 1,
      "author": "Taylor",
      "body": "Very helpful demo.",
      "date": "2024-01-12T14:20:00Z"
    }
  ]
}

Upon hitting http://localhost:5173/ in the browser, we see the two posts which are in the db.json

In the db.json, we have two comments for the first post (postId: 1). When we click on the first post (Getting started with JSON Server) and goes to the details page, we can see the two comments:

→ Adding a Post

Let’s add a new post by clicking New Post:

Click Publish and then navigate to the Home page. You will see the new post:

Updated db.json:

{
  "posts": [
    {
      "id": "1",
      "title": "Getting started with JSON Server",
      "body": "JSON Server gives you a full fake REST API in minutes.",
      "author": "Mark",
      "date": "2024-01-10T10:00:00Z"
    },
    {
      "id": "2",
      "title": "Why mock APIs speed up frontend development",
      "body": "Mock APIs let frontend work independently while backend is in progress.",
      "author": "David",
      "date": "2024-02-05T12:30:00Z"
    },
    {
      "id": "615d",
      "title": "Difference between .NET Framework and .NET Core",
      "author": "Mark",
      "body": ".NET Core is cross-platform",
      "date": "2025-10-02T20:21:03.255Z"
    }
  ],
  "comments": [
    {
      "id": "1",
      "postId": 1,
      "author": "Sara",
      "body": "Nice intro — saved me time!",
      "date": "2024-01-11T09:00:00Z"
    },
    {
      "id": "2",
      "postId": 1,
      "author": "Taylor",
      "body": "Very helpful demo.",
      "date": "2024-01-12T14:20:00Z"
    }
  ]
}

→ Deleting a Post

Let’s delete the post which we have just added by clicking Delete button:

Now the Home page is:

Updated db.json:

{
  "posts": [
    {
      "id": "1",
      "title": "Getting started with JSON Server",
      "body": "JSON Server gives you a full fake REST API in minutes.",
      "author": "Mark",
      "date": "2024-01-10T10:00:00Z"
    },
    {
      "id": "2",
      "title": "Why mock APIs speed up frontend development",
      "body": "Mock APIs let frontend work independently while backend is in progress.",
      "author": "David",
      "date": "2024-02-05T12:30:00Z"
    }
  ],
  "comments": [
    {
      "id": "1",
      "postId": 1,
      "author": "Sara",
      "body": "Nice intro — saved me time!",
      "date": "2024-01-11T09:00:00Z"
    },
    {
      "id": "2",
      "postId": 1,
      "author": "Taylor",
      "body": "Very helpful demo.",
      "date": "2024-01-12T14:20:00Z"
    }
  ]
}

→ Editing a Post

Let’s try to update a post:

Click Update Post button and go back to Home page.

You can see that the post has been updated.

Updated db.json:

{
  "posts": [
    {
      "id": "1",
      "title": "Getting started with JSON Server",
      "body": "JSON Server gives you a full fake REST API in minutes, which speeds up frontend development.",
      "author": "Mark",
      "date": "2025-10-03T06:23:04.627Z"
    },
    {
      "id": "2",
      "title": "Why mock APIs speed up frontend development",
      "body": "Mock APIs let frontend work independently while backend is in progress.",
      "author": "David",
      "date": "2024-02-05T12:30:00Z"
    }
  ],
  "comments": [
    {
      "id": "1",
      "postId": 1,
      "author": "Sara",
      "body": "Nice intro — saved me time!",
      "date": "2024-01-11T09:00:00Z"
    },
    {
      "id": "2",
      "postId": 1,
      "author": "Taylor",
      "body": "Very helpful demo.",
      "date": "2024-01-12T14:20:00Z"
    }
  ]
}

Final Thoughts

JSON Server is one of those tools every frontend developer should know about. It:

• Removes backend dependency while developing UI.

• Provides realistic mock APIs for integration & E2E tests.

• Makes prototyping lightning fast.

• Requires almost zero setup.

• Improves collaboration between frontend and backend teams since both can work in parallel without blocking each other.

In short: if your project consumes REST APIs, JSON Server can save you time and headaches.

You can explore the full demo code on GitHub.