Overview

msw-panel adds a floating devtools panel to any app that already uses Mock Service Worker. It lets you inspect registered handlers and toggle them on or off without changing your MSW setup.

The common case

You have MSW set up. You want a UI to toggle handlers during development. That is the whole thing:

npm install -D msw-panel

pnpm add -D msw-panel

yarn add -D msw-panel

bun add -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} />
    </>
  );
}

See Getting started for the full setup.

Framework adapters

The React adapter (msw-panel/react) is the first supported UI package. 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.

Packages

msw-panel — the controller. Tracks handlers, persists disabled state, applies changes through the MSW runtime.
msw-panel/react — the React panel UI.
msw-panel/bridge — optional transport layer for setups where the panel lives in a separate window, tab, or process. Most projects do not need this.