By Remy Sharp 4-Jul, 2015

Live reloading CSS

Due to a few recent optimisations in the JS Bin rendering logic, we now have live reloading CSS in the editor.

This means that when you change any content in the CSS panel, as always, the output is updated in real time, except now only the CSS will change.

So any JavaScript or existing DOM state will remain in it’s current state and your styles will change. This also applies to any of the CSS processors, such as Sass, SCSS, Myth, etc.

You can see a short demo below - note that the JavaScript canvas animation continues to run and the counter increases:

Technical behind the scenes

This change is due to a small optimisation I made to JS Bin’s rendering. We use promises under the hood, but before we would always create a new promise for all the panels when any panel changed.

Now the code will only re-render the promise of the focused panel. Since you can call the .then on a fulfilled promise over and over, it allows me to re-use the previously rendered promises.

The two benefits are that it was easy to add live reloading of CSS, but also live rendering is also now faster, as there’s less work for your browser to do.