Skip to content

MSW Handler Builder

Visually compose Mock Service Worker REST and GraphQL handlers with matchers, response shapes, delays, and one-shot semantics. Exports MSW v2 handlers.ts.

MSW Handler Builder

2 handler(s)
Query matchers

None

Header matchers

None

Response headers

handlers.ts (MSW v2)

import { http, graphql, HttpResponse } from "msw";

export const handlers = [
  // List users
  http.get("/api/users", async ({ request }) => {
    return new HttpResponse("[\n  {\n    \"id\": 1,\n    \"name\": \"Ada\"\n  }\n]", { status: 200, headers: { "Content-Type": "application/json" } });
  }),
  // GraphQL user query
  graphql.query("GetUser", async () => {
    return new HttpResponse("{\"data\":{\n  \"user\": {\n    \"id\": \"1\",\n    \"name\": \"Ada\"\n  }\n}}", { status: 200, headers: { "Content-Type": "application/json" } });
  })
];

Updated . Provided as is. Check the output before you rely on it in production.

How to use MSW Handler Builder

  1. 1

    Add a handler

    Use the REST or GraphQL button to drop a starter handler into the list. Each handler has its own editor pane that you reach by clicking it in the sidebar.

  2. 2

    Configure matchers

    For REST, set method, path, query parameters, and required headers. For GraphQL, pick query or mutation and enter the operation name MSW will match on.

  3. 3

    Shape the response

    Pick a status code, choose JSON or text, edit the response body and headers, optionally add a delay, and decide between persistent and one-shot semantics.

  4. 4

    Copy or download handlers.ts

    The generated MSW v2 module updates on every change. Use Copy for clipboard or Download to save handlers.ts straight into your project's mocks directory.

Questions and answers

What is MSW Handler Builder?
Mock Service Worker (MSW) intercepts network requests in the browser or Node and answers them from request handlers you define. This builder composes MSW v2 REST and GraphQL handlers with query and header matchers, status codes, response bodies, delays and a one-shot option, and exports a handlers.ts file.
Which MSW version does it target?
The output uses the MSW v2 API: http.method matchers, graphql.query and graphql.mutation, HttpResponse.json or HttpResponse.text, and delay helpers. The v1 rest.* API is not emitted.
How are query and header matchers emitted?
Each matcher pair becomes a guard at the top of the resolver. If a request does not match the configured query or header values, the resolver returns passthrough() so MSW falls through to the next handler.
Can I mark a handler as one-shot?
Yes. The one-shot toggle adds the { once: true } option to the handler call, so MSW removes it from the active list after the first matching request resolves through it.
Does it send my data to a server?
No. Editing, code generation, and the download step all run in your browser. Your matchers, response bodies, and exported handlers.ts file never leave the tab during the build.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/mock-service-worker-handler-builder/

For automation planning, fetch the canonical contract at /api/tool/mock-service-worker-handler-builder.json.