How to Send Real Time Custom Events from the Browser a Vite Dev Server

Ever wanted your browser to talk directly to the Vite dev server? Whether you're building custom devtools, triggering rebuilds, or just logging user behavior during development — it's totally possible using Vite’s built-in WebSocket connection.

Why Send Events to the Dev Server?

Vite's dev server runs a WebSocket behind the scenes to power features like hot module replacement (HMR). With a small trick, you can use this connection to send your own custom messages from the browser to the server — no polling or HTTP requests needed.

Step 1: Send a Custom Event from the Browser

Inside your app code, you can use import.meta.hot.send() to dispatch an event to the Vite server:

if (import.meta.hot) {
  import.meta.hot.send('my-custom-event', {
    message: 'Hello from the browser!'
  });
}

This only runs in development (since import.meta.hot is only defined in dev mode), making it perfect for debugging or building custom dev features.

Step 2: Listen for the Event on the Vite Server

In your vite.config.ts, use the configureServer hook to handle incoming events:

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'custom-dev-events',
      configureServer(server) {
        server.ws.on('my-custom-event', (data) => {
          console.log('Received custom event:', data.message);
        });
      }
    }
  ]
});

Now whenever that event is sent from the browser, your dev server can respond — log it, run a script, send something back, or whatever else you need.

Bonus: Two-Way Communication

You can also send a message back to the browser:

server.ws.send({
  type: 'custom-response',
  payload: { success: true }
});

And receive it on the client:

if (import.meta.hot) {
  import.meta.hot.on('custom-response', (data) => {
    console.log('Got server response:', data.success);
  });
}

Recap

• Use import.meta.hot.send() to send events to the dev server
• Handle them in vite.config.ts via server.ws.on(...)
• Works great for dev-only workflows, no extra network layer needed

This is a super useful trick for building smoother tooling experiences, interactive playgrounds, or advanced logging without any production impact.

To see this in action view this example on stackblitz.

If you’d like more info on using or customizing Vite (including building your own Vite plugins), checkout our course Rapid Development with Vite.