Svelte Hot Reloading Issue

Update 2022-03-24

HMR is now officially supported in Svelte with Vite, Svelte Kit, and Webpack. The Snowpack plugin for Svelte also has HMR support.

The information bellow are essentially still current regarding HMR support in the Rollup universe.

With regard to HMR, today Vite (and Kit that uses it under the hood) is probably the best solution by far. It has excellent HMR support, and is very much faster during dev than bundle optimization oriented tools like Rollup.

(And so, the accepted answer is even more wrong now!)


Just for the kicks of contradicting the author about his own libs, I'm going to argue that the accepted answer is all wrong.

Rollup can have HMR with rollup-plugin-hot. As previously noted in the comments, Nollup can do it too.

With just that, you can have updated code pushed to the browser and refresh (i.e. destroy + recreate) your whole app without reloading the page. However that's not terribly better, if at all, than a full page reload.

What you want is to replace only the Svelte components that are affected by a code update, so that your current app state is preserved and, as much as possible, you also want the state of updated components to be preserved too. For this, you can use rollup-plugin-svelte-hot with Rollup / Nollup, or svelte-loader-hot with Webpack.

Pending official support, I maintain clones of the official templates + HMR: svelte-template-hot for Rollup / Nollup, and svelte-template-webpack-hot for Webpack. There is also sapper-template-hot for Sapper (only supports Webpack). And, for completeness, svelte-native-template (not maintained by me) also includes HMR support.

HMR is still not officially supported by Svelte. The issue mentioned in Rich's answer has been closed. Progress can now be tracked in this issue.

(Of course, Rich's answer was correct when it was initially written. And it is still correct from an official perspective. And this answer is a shameless plug to advertise my own projects because the question ranks pretty high in Google, but I hope it is useful nonetheless.)


The default template (https://github.com/sveltejs/template) uses Rollup, which doesn't support hot module reloading. The webpack version (https://github.com/sveltejs/template-webpack) will support HMR, but first we need to add some hooks to Svelte itself to make it possible. There's an issue you can track here — hopefully we'll be able to do this work soon.

Until then, Tholle's suggestion of using the livereload plugin is probably the best compromise.