Custom UI

Use the default MSWDevTool component when you want the complete floating UI for HTTP and WebSocket controls. The separately exported composition components currently cover the HTTP handler table and temporary HTTP handler form.

Customize Trigger UI

Pass a React element to the trigger prop to replace the default trigger.

import type { ReactElement } from "react";
 
type CustomTriggerProps = {
  trigger?: ReactElement;
};

For example, using Tailwind CSS:

import { MSWDevTool } from "@msw-dev-tool/react";
 
<MSWDevTool trigger={<button className="bg-blue-500 text-white px-4 py-2 rounded-md">Open msw-dev-tool</button>} />

Compose your own Dev Tool UI

@msw-dev-tool/react currently exports these UI components:

• MSWDevTool: the complete floating Dev Tool UI for HTTP and WebSocket controls.
• HandlerTable: the HTTP handler table and its runtime controls.
• AddTempHandlerForm: a form for adding a temporary HTTP handler.

Use HandlerTable and AddTempHandlerForm to create the Dev Tool layout and controls that your team needs while keeping the same runtime handler store.

import { useState } from "react";
import {
  AddTempHandlerForm,
  HandlerTable,
} from "@msw-dev-tool/react";
import "@msw-dev-tool/react/msw-dev-tool.css";
 
export function ProjectDevTool() {
  const [showForm, setShowForm] = useState(false);
 
  return (
    <aside className="rounded border p-4">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="font-semibold">Mock API controls</h2>
        <button onClick={() => setShowForm((open) => !open)}>
          Add temporary API
        </button>
      </div>
 
      {showForm && <AddTempHandlerForm onClose={() => setShowForm(false)} />}
      <HandlerTable />
    </aside>
  );
}

The exported components use the MSW Dev Tool runtime configured by setupDevToolWorker(). Include the package stylesheet, then provide your own layout, trigger, and surrounding application styling. Use MSWDevTool when the complete HTTP and WebSocket interface is required; HandlerTable and AddTempHandlerForm do not expose the WebSocket panel.