# How-to: supersmooth browser reload on css/html changes

**URL:** <https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995>\
**Category:** Themes\
**Created:** [April 24, 2019, 6:08pm UTC](https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995 "2019-04-24T18:08:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mheland](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mheland/32/26236_2.png) [@mheland](https://forum.ghost.org/u/mheland)\
**Post date:** [April 24, 2019, 6:08pm UTC](https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995/1 "2019-04-24T18:08:03Z")

</div>

You have a local development Ghost 2.0 running on your machine - using `ghost start`.

You also have a copy of the Caspar 2.0 theme which you are wildly hacking to your needs, with Gulp running the `default` task with css and hbs watcher, building screen.css when you save edits. Nice.

You fire up your browser on localhost:2368 and find your Ghost site. Yay!

But, the browser does not reload when you edit the .hbs and .css files.  
Gulp rebuilds the files but the browser does not reload. Frustrating.

A very elegant and supersmooth solution is to add a script to default.hbs, just above the {{ghost\_head}} tag in `<HEAD>`

`<script type="text/javascript" src="http://livejs.com/live.js"></script>`

That’s it. Any changes to HTML or .js files now reloads the browser.  
CSS-changes are applied without reload, they just happen.

Remember to remove live.js when you deploy to production…  
Live.js written by Martin Kool (@mrtnkl).

Thank you to [Charles Roper](https://stackoverflow.com/users/1944/charles-roper) at Stack Overflow for sharing this.

---

<div class="post-metadata">

**Author:** ![Aileen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/aileen/32/9846_2.png) [@Aileen](https://forum.ghost.org/u/Aileen)\
**Post date:** [April 25, 2019, 4:05am UTC](https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995/2 "2019-04-25T04:05:19Z")

</div>

Thanks for sharing this!

Just wanted to let you know, that `*.hbs` livereloading is now build into Casper@2.9.10, see this commit [here](https://github.com/TryGhost/Casper/commit/b4d0219d4eab9ed785f14bcd756b2ea6b7af00e8)

---

<div class="post-metadata">

**Author:** ![mheland](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mheland/32/26236_2.png) [@mheland](https://forum.ghost.org/u/mheland)\
**Post date:** [April 25, 2019, 7:36pm UTC](https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995/3 "2019-04-25T19:36:57Z")

</div>

Gulp syntax is somewhat… ahem… challenging but if I read this correctly live-reload is part of the pipeline. Also uses new parallel processing - good news!

I figured out how to prevent live.js from loading on production after a `gulp zip`, this goes in `<HEAD>`

```
<script type="text/javascript" />
    if (window.location.hostname == "localhost") {
      var script = document.createElement('script');
      script.src = 'http://livejs.com/live.js';
      document.write(script.outerHTML);
    };
  </script />

```

Also, I found this to be useful - the only word I struggle with more is collegue/collouege/coll…  
 ![parallel-small](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/f/f22b9f3172b2953a98f46f352c3591a7564836dd.jpeg)

---

<div class="post-metadata">

**Author:** ![Koli14](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/koli14/32/5871_2.png) [@Koli14](https://forum.ghost.org/u/Koli14)\
**Post date:** [January 16, 2020, 2:07pm UTC](https://forum.ghost.org/t/how-to-supersmooth-browser-reload-on-css-html-changes/6995/4 "2020-01-16T14:07:15Z")

</div>

I’m new to the world of Ghost and Gulp. I just made a fresh local install of Ghost, and was disappointed, that it does not refresh my browser after I save a .hbs or .css file. Thanks for your code @mheland, it works with Ghost v3.3.0 and Caspar v3.0.6.