Overview

msw-panel adds a floating devtools panel to any app that already uses Mock Service Worker. It lets you inspect registered handlers, toggle them on or off, switch endpoints between named scenarios, and group them with feature tags, 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 pnpm yarn bun

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.

Adopt incrementally

Everything beyond toggling is opt-in and layers onto the setup above without reworking it:

• Feature tags wrap handlers you already have. No config changes.
• Scenarios reuse the resolvers you already wrote, turning one endpoint into a set of switchable response states.

You can introduce them one handler at a time.

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.