live-server with hot reloading
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


No config hot reloading for sketching with code.



npm install -g hot-server

Serve directory statically:


Save changes to *.js or *.css and they'll be injected via a websocket without a full refresh.

Since your whole script file reruns, you'll probably want to clean up anything it adds to the page with something like var svg ='#graph').html('').append('svg'). Stopping any timers and clearing any listeners that don't reset is also a good idea:

if (window.timer) timer.stop()
window.timer = d3.timer(function(t){
  // cool animation code

To persist data between refreshes, declare and initialize your data in a separate file from the rest of your code. Only the changed file will rerun. Or only initialize your data on the first run:

window.points = window.points || d3.range(50)
      return [Math.random() * width, Math.random() * height]

Default port is 3989; hot-server --port=4444 sets the port.

Is this the right tool for me?

If you're building an actual webapp, maybe not! This is a naive approach to hot reloading that will not work with more complicated code. Webpack might be a better option:

Or a even a different language:

But! If you're mostly working on short, simple pieces and dislike yak shaving config files this might be a good fit. It is as simple to use as python -m http.server with the added benefit of seemly magically updating pages without a refresh.

The implementation is also simple—just 50 lines of code for the server and 10 for the client—and you might be able to re-purpose it. I incorporated a modified version into a slow make/requirejs/grunt build system at work and reduced the time it took to see the result of changing my code from ~6 seconds to 0.