Mockingbird
Mockingbird logo

HTTP mocking for frontend development

Mock APIs without waiting on backends

Mockingbird lets you define HTTP responses — status, headers, body — and test how your frontend behaves. Pick the workflow that fits your setup: a browser extension that intercepts fetch on any page, or a local API with a web app.

Choose a workflow View source

Two ways to use Mockingbird

Both workflows share the same idea — saved mocks that return fake HTTP responses — but differ in where they run and how URLs are matched.

Browser

Chromium extension

Install the extension and patch fetch on any http/https tab. No API server — mocks live in the browser and work on real sites you already have open.

  • No backend setup
  • Wildcard URL patterns
  • Quick per-page testing

Storage chrome.storage.local

See setup steps →
Local server

Web app + API

Run a Fastify API on localhost and manage mocks from a React app. Point your frontend at the API — matching routes return your configured responses.

  • Team-shared mock files
  • Pathname-based matching
  • Persistent mocks on disk

Storage packages/api/.mockingbird/requests.json

See setup steps →

Workflow 1

Chromium extension

Best when you already have a site open in the browser and want to mock fetch calls without running a local API.

  1. 1

    Install dependencies

    Same as the local workflow — one npm install at the repo root.

    Terminal 
    git clone https://github.com/MaxiGarcia13/mockingbird.git
cd mockingbird
npm install
  2. 2

    Build the extension

    Build once, or watch for changes while developing.

    Terminal 
    npm run build
  3. 3

    Load it in Chrome

    Open chrome://extensions, enable Developer mode, click Load unpacked, and select packages/chromium-extension/dist.

  4. 4

    Add a mock on any site

    Open an http or https page, click the Mockingbird icon, define a mock (method, URL pattern, response), and turn interception on.

  5. 5

    Trigger a matching fetch

    When your page calls fetch with a matching method and URL pattern, the extension returns your mock response. Reload the extension in Chrome after code changes.

    Example 
    # Wildcard example
# Pattern: http://localhost*/api/*
# Matches: http://localhost:5173/api/users
URL matching: patterns support * wildcards, query params, and trailing /* to include the base path. Only fetch is intercepted.

URL pattern examples

Pattern Example request Matches Notes
https://api.example.com/users https://api.example.com/users Yes Exact URL
https://api.example.com/users https://api.example.com/users/1 No Path must match exactly
http://localhost*/api/* http://localhost:5173/api/users Yes Wildcard port and path
http://localhost:5173/api http://localhost:3000/api No Port must match when specified
https://example.*.com/* https://example.test.com/foo Yes Wildcard subdomain
https://example.com/* https://example.com Yes Trailing /* includes base URL
https://example.com?q=*&test=hola https://example.com?q=foo&test=hola Yes Wildcard query params

Workflow 2

Local server + web app

Best when you want mocks on disk, a dedicated UI, and your frontend talking to a local mock server.

  1. 1

    Install dependencies

    Clone the repo and install once from the monorepo root.

    Terminal 
    git clone https://github.com/MaxiGarcia13/mockingbird.git
cd mockingbird
npm install
  2. 2

    Start the API

    The Fastify server stores mocks and serves them on localhost (default port 3000).

    Terminal 
    npm run dev
  3. 3

    Open the web app

    In a second terminal, start the React UI to create and manage mocks.

    Terminal 
    npm run dev:app
  4. 4

    Create a mock and enable it

    Set method, URL, status, headers, and body in the app, then turn the mock on.

  5. 5

    Point your frontend at the API

    Send requests to http://127.0.0.1:3000/... — only the pathname is matched against your saved URL.

    Example 
    # Example: saved URL http://example.com/api/users
# matches GET http://127.0.0.1:3000/api/users
URL matching: use full URLs when saving mocks, but only the pathname is compared — no wildcards. Trailing slashes are normalized.

Quick comparison

Extension Local app + API
Requires local server No Yes
Works on any website Yes — http/https tabs No — point app at API host
URL wildcards Yes No
Mock persistence Browser profile File on disk
Intercepted API window.fetch HTTP server routes