How to Use localmockdb for REST API Mocking

REST API mocking helps frontend developers build and test real UI behavior before the backend is ready. Instead of waiting for final API endpoints, you can create fake API-like responses and continue building forms, tables, dashboards, detail pages, and CRUD flows.

localmockdb makes this process simple for React and Next.js projects. It gives you REST-like methods, browser persistence, and a frontend-friendly workflow so you can build realistic interfaces without setting up a full backend.

What Is REST API Mocking?

REST API mocking means creating temporary API-like behavior for frontend development. A mocked API can return records, create new records, update existing records, delete records, and respond with structured data similar to a real backend API.

This is useful because frontend and backend work often happen at the same time. The UI may be ready, but real endpoints may still be changing. Mocking allows frontend developers to test user flows without blocking progress.

REST API mocking is especially helpful for admin panels, todo apps, ecommerce product managers, blog dashboards, CRM screens, student projects, UI demos, and client previews.

Why Use localmockdb for API Mocking?

localmockdb is useful because it gives you API-like behavior inside the frontend app. You do not need to create Express routes, connect a database, run JSON Server, or wait for backend deployment. You can install the package and start testing data-driven UI flows quickly.

With localmockdb, you can build screens that behave closer to real applications. You can create items, list items, edit records, patch fields, delete records, show empty states, test success messages, and keep browser data after refresh.

• Zero backend setup for frontend demos
• REST-like methods for CRUD workflows
• Browser-based persistence for repeated testing
• Useful for React, Next.js, and JavaScript learning projects
• Better than hardcoded arrays for dynamic UI flows
• Good for MVP previews and client demonstrations

For a broader product overview, read our related guide on mock database for frontend development with localmockdb.

How to Install localmockdb

Install localmockdb in your React, Next.js, or JavaScript frontend project using npm:

npm install localmockdb

Or install it with pnpm:

pnpm add localmockdb

After installation, create a small helper file. Keeping the mock API in one file makes it easier to reuse across components.

How to Create a Mock API Helper

Create a file such as lib/db.js and export one shared database instance from it.

// lib/db.js
import { createAPI } from "localmockdb";

export const db = createAPI();

Now you can import db into your components and call REST-like methods from event handlers, effects, or helper functions.

import { db } from "@/lib/db";

const res = await db.get("/todos");

This keeps your UI code cleaner because all components can share the same mock API setup instead of creating separate instances in different files.

How to Use CRUD Methods

localmockdb uses REST-like methods, so the code feels familiar if you have worked with API endpoints before. You can create, list, read, update, patch, and delete records.

Create a record

await db.post("/todos", {
  title: "Learn localmockdb",
  completed: false,
});

Read all records

const res = await db.get("/todos");

if (res.success) {
  console.log(res.data);
}

Read one record

const res = await db.get("/todos/1");

if (res.success) {
  console.log(res.data);
}

Replace a full record with PUT

await db.put("/todos/1", {
  title: "Learn localmockdb properly",
  completed: true,
});

Update selected fields with PATCH

await db.patch("/todos/1", {
  completed: true,
});

Delete a record

await db.delete("/todos/1");

These methods are useful when you want your UI to behave like a real app. You can update state after every response and test how the screen changes after each action.

What Does a Mock API Response Look Like?

A good mock API should return structured responses so your UI can handle success, errors, status codes, and data consistently.

{
  "success": true,
  "statusCode": 200,
  "data": [
    {
      "id": "1",
      "title": "Learn localmockdb",
      "completed": false,
      "createdAt": "2026-06-18T09:00:00.000Z",
      "updatedAt": "2026-06-18T09:00:00.000Z"
    }
  ]
}

This response shape is helpful because your frontend can follow a clean pattern: check success, use data, show an error if needed, and refresh the UI after changes.

How to Use localmockdb in Next.js

In Next.js App Router, use localmockdb inside a client component. This is important because browser storage is available in the browser, not during server rendering.

// app/localmockdb-demo/page.js
"use client";

import { useEffect, useState } from "react";
import { db } from "@/lib/db";

export default function LocalMockDBDemoPage() {
  const [todos, setTodos] = useState([]);
  const [title, setTitle] = useState("");

  useEffect(() => {
    loadTodos();
  }, []);

  async function loadTodos() {
    const res = await db.get("/todos");

    if (!res.success) {
      return;
    }

    setTodos(res.data);
  }

  async function addTodo(event) {
    event.preventDefault();

    if (!title.trim()) {
      return;
    }

    await db.post("/todos", {
      title,
      completed: false,
    });

    setTitle("");
    loadTodos();
  }

  async function toggleTodo(todo) {
    await db.patch("/todos/" + todo.id, {
      completed: !todo.completed,
    });

    loadTodos();
  }

  async function deleteTodo(id) {
    await db.delete("/todos/" + id);
    loadTodos();
  }

  return (
    <main className="mx-auto max-w-2xl p-6">
      <h1 className="mb-4 text-3xl font-bold">
        localmockdb Todo Demo
      </h1>

      <form onSubmit={addTodo} className="mb-6 flex gap-2">
        <input
          value={title}
          onChange={(event) => setTitle(event.target.value)}
          placeholder="Enter todo title"
          className="flex-1 rounded border p-3"
        />
        <button
          type="submit"
          className="rounded bg-gray-900 px-4 py-3 text-white"
        >
          Add
        </button>
      </form>

      {todos.length === 0 ? (
        <p>No todos yet.</p>
      ) : (
        <div className="space-y-3">
          {todos.map((todo) => (
            <div
              key={todo.id}
              className="flex items-center justify-between rounded border p-3"
            >
              <button
                type="button"
                onClick={() => toggleTodo(todo)}
                className={todo.completed ? "line-through" : ""}
              >
                {todo.title}
              </button>

              <button
                type="button"
                onClick={() => deleteTodo(todo.id)}
                className="text-red-600"
              >
                Delete
              </button>
            </div>
          ))}
        </div>
      )}
    </main>
  );
}

This example gives you a complete frontend-only CRUD flow. You can add todos, toggle status, delete records, reload the page, and test how the UI behaves with persisted mock data.

Which UI States Can You Test?

REST API mocking is not only about fake data. It is also useful for checking whether your interface handles real application states correctly.

Testing these states early helps you catch frontend problems before connecting the app to a production backend.

Common Mistakes to Avoid

localmockdb is simple, but beginners can still make mistakes when using it inside React or Next.js projects.

• Using localmockdb inside a server component instead of a client component in Next.js.
• Creating a new database instance in every component instead of sharing one helper file.
• Forgetting to reload state after post, put, patch, or delete actions.
• Treating mock browser storage as secure production storage.
• Building UI only for the happy path and ignoring empty or error states.
• Not planning how mock routes will map to real backend endpoints later.

A good workflow is to build the UI with localmockdb first, then replace mock calls with real API calls when the backend is ready.

Frequently Asked Questions

Conclusion

localmockdb is a practical way to use REST API mocking in frontend development. It helps you build CRUD screens, test forms, create dashboards, and prepare demos without waiting for backend APIs.

Use it for React, Next.js client components, learning projects, prototypes, UI demos, and frontend-first MVPs. When the project is ready for real users, replace mock calls with secure production APIs and a real backend database.