writing-vite-devtools-integrations

To add custom docks and views to Vite DevTools, your Vite plugin must implement the devtools.setup(ctx) lifecycle hook, exposing UI surfaces through ctx.docks and ctx.views to render your plugin interface inside the DevTools panel.

RPC communication in Vite DevTools integration works by registering RPC functions and shared state via the @vitejs/devtools-kit, enabling cross-context communication between the plugin backend and the DevTools UI client.

The best way to standardize Vite plugin DevTools integration is to use the @vitejs/devtools-kit to register shared state and RPC surfaces, hosting client scripts and static assets through a cohesive devtools.setup(ctx) implementation.

Yes, you need @vitejs/devtools-kit to expose plugin state to the Vite DevTools UI, as it provides the necessary utilities for registering RPC functions and shared state required for cross-context communication between plugin and DevTools.

You can host static assets and client scripts inside Vite DevTools by implementing devtools.setup(ctx) in your plugin, using ctx.views and ctx.docks to expose UI elements and serve assets directly within the DevTools interface.

If your Vite plugin is not showing up in DevTools after registering docks, ensure your plugin correctly implements the devtools.setup(ctx) hook and that shared state and RPC functions are properly registered through @vitejs/devtools-kit for cross-context communication.