You don't need Webpack for hot reload

Did you know that hot reloading is a built-in feature of the Google Chrome browser? You can edit code using a text editor, save it, and the changes are picked up by the browser without reloading the page. In other words, it works like Webpack HMR but is a built-in feature of Google Chrome and doesn't require installing any additional software!

On a short video, you can see how it works:

Setting up

Here are the instructions on how to set it up:

python3 -m http.server

You should see the following result:

<script type="module" src='index.js'></script>

and a file named index.js with the following content:

import { h, render } from ''
import { useState } from '';
import htm from ''

// Initialize htm with Preact
const html = htm.bind(h)

function Counter() {
  const [value, setValue] = useState(0)

  return html`
      <div>Counter: ${value}</div>
      <button onClick=${() => setValue(value + 1)}>Increment</button>
      <button onClick=${() => setValue(value - 1)}>Decrement</button>

render(html`<${Counter}/>`, document.body)

Now everything is ready! Edit the code, save the file, and watch as Google Chrome picks up the modified code without reloading the page! It's important to keep Chrome Developer Tools open.

What is this magic called?

This feature is called Live Edit. For some reason, it is not well-advertised. It is documented on the Chrome Developer Tools website.


This feature also works for CSS. Interestingly, it works both ways. When you edit styles in the Elements view, Chrome changes the file on the hard drive. For example, you can select a color using the color picker, and you don't have to manually copy the RGB code into your text editor. And vice versa, if you change styles in the editor, they are picked up by Chrome without reloading the page.


I have previously written about module preloading.

Together with import maps, module preloads, and Live Edit, we can develop HTML5 applications without complex build tools!

Back to the blog's table of contents