Skip to content

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" } });
  })
];

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is MSW Handler Builder?
MSW Handler Builder is a visual editor for Mock Service Worker v2 handlers. Configure REST and GraphQL matchers, response shapes, and delays, then export a typed handlers.ts module for your project.
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.