Skip to content
MSW Panel

MSW Panel

Inspect registered MSW handlers, toggle them, switch endpoints between scenarios, and group them with feature tags, all without changing your existing setup.
Get started View demo How it works

Add two packages to your existing MSW setup:

npm install -D msw-panel
import { createMswPanelController } from "msw-panel";
import { MswPanel } from "msw-panel/react";


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


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

A floating button appears in the corner. Click it to open the panel and toggle any handler on or off. Then opt into more when you want it: feature tags to organize a large handler list, and scenarios to switch an endpoint between empty / error / loading states. Both layer onto the setup above without reworking it.

Vue adapter (#4) and Svelte adapter (#5) are the planned next first-party adapters. Solid adapter (#6) and Angular adapter (#7) are under consideration after that. Reactions and comments on those issues help determine priority.