Hot Module Replacement (HMR) swaps an edited module into the running page without a full page refresh, so application state survives the edit.
Vite's dev server detects file changes on its own and pushes each update to the browser over a WebSocket. The browser re-imports the changed module, plus any importers up to the nearest module that accepts the update. Because Vite serves native ES modules, an edit needs no bundle rebuild, so updates are nearly instant and much faster than with traditional bundlers.
Vue, React and Svelte hook into this through Vite's HMR API, import.meta.hot, to keep state across updates.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
