Getting started

Install

npm pnpm yarn bun

npm install -D msw-panel

pnpm add -D msw-panel

yarn add -D msw-panel

bun add -d msw-panel

Add to your app

import { createMswPanelController } from "msw-panel";
import { MswPanel } from "msw-panel/react";
import { worker } from "./mocks/browser";

const controller = createMswPanelController({ runtime: worker });

export function App() {
  return (
    <>
      <Routes />
      <MswPanel controller={controller} />
    </>
  );
}

That’s it. A floating button appears in the corner. Click it to open the panel and toggle handlers on or off.

Notice what you didn’t have to do: no rewriting handlers, no wrapping your worker, no changing how you call setupWorker. The panel reads the handlers MSW already knows about.

Next steps

Everything above is the whole baseline. From here you can opt into more, one piece at a time. None of it changes the setup you just wrote:

• Feature tags: wrap a handler with withTags(handler, ["auth"]) to make it searchable and groupable. No config changes.
• Scenarios: turn one endpoint into defineScenarios to switch it between success / empty / error states from the panel. Your existing resolver becomes the default scenario.

See the React reference for all props and defaults.