Skip to content
MSW Panel

MSW Panel

Inspect registered MSW handlers and toggle them on or off 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. 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.