Skip to content

Remote Connection Demo

This page is live. When you open it directly, it tells you how to connect. When you open it through a Vite DevTools dock registered with remote: true, it reads the connection descriptor from the URL and talks to your local dev server over WebSocket.

How it works

  1. Your plugin registers an iframe dock with remote: true pointing at this page.
  2. The DevTools core allocates a session-only auth token and appends the connection descriptor to the iframe URL: #vite-devtools-kit-connection=…
  3. When this page loads, parseRemoteConnection() reads the descriptor, and connectRemoteDevTools() opens a WebSocket back to the local dev server.
  4. The live "dock registry" list above subscribes to the devtoolskit:internal:docks shared state — it re-renders on every registration change.

See the Remote Client guide for the full API and the underlying security model.

Released under the MIT License.