HMR Boundary Lab

Increment the counter to build up some state, then edit a module. HMR swaps just that module and keeps your state; a full reload throws it all away. Watch the difference.

Counter state: 0
Button.css — color
state preserved
Edit a module to see what HMR does…

The import.meta.hot API

// a module opts into HMR by accepting its own updates
export const add = (a, b) => a + b;

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // new version arrived — swap it in WITHOUT reloading the page
    console.log("updated!", newModule.add);
  });

  import.meta.hot.dispose(() => {
    // clean up timers/listeners before the old version is replaced
  });
}
// Frameworks (React Fast Refresh, Vue) wire this up for you automatically.