Skip to content
MSW Panel

Run the remote inspector example

The repo includes a remote inspector path built on the WebSocket bridge transport.

Interactive example

Remote inspector flow

Simulate the relay-backed host and inspector apps to see how remote commands become local snapshot updates.

Relay

Offline

Start the relay before sockets can connect.

Host app

Disconnected

The host owns the real controller and MSW runtime.

Inspector app

Disconnected

The inspector mounts a React panel against a bridge client.

Host handler On
Inspector snapshot No snapshot
Last request Not triggered

    Start the relay

    Section titled “Start the relay”
    Terminal window
    pnpm dev:example-remote-relay

    The relay defaults to ws://localhost:4197.

    Start the host app

    Section titled “Start the host app”
    Terminal window
    pnpm dev:example-react

    The host app mounts a local MswPanel against a bridge client backed by BroadcastChannel. The WebSocket bridge to the remote relay is opt-in — it only activates when VITE_MSW_PANEL_RELAY_URL is set in the environment.

    Start the inspector app

    Section titled “Start the inspector app”
    Terminal window
    pnpm dev:example-remote-inspector

    By default, both host and inspector connect to the example-react session on the relay.

    Enabling the remote bridge

    Section titled “Enabling the remote bridge”

    Set VITE_MSW_PANEL_RELAY_URL when starting the host app to activate the WebSocket bridge:

    Terminal window
    VITE_MSW_PANEL_RELAY_URL=ws://localhost:4197 pnpm dev:example-react

    To connect to a different relay, point either app at its URL with this variable.

    What this example proves

    Section titled “What this example proves”
    • the React panel does not care whether its controller is local or remote
    • the WebSocket transport can carry the bridge handshake without connection timing hacks
    • one runtime can be controlled by more than one UI surface