#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone to breaking concentration.

Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or Stylus (or would like to try out working with these languages) LiveReload makes it easy. Essentially, just start making files with the appropriate file extention and LiveReload will compile them down to their native language every time the file is saved.


  1. Alfred
    Permalink to comment#

    Do anyone know if there is a similar program for windows?

    • zsitro
      Permalink to comment#

      same question here :)

    • Fredrik
      Permalink to comment#

      While the Windows version of LiveReload is under development you could try XRefresh

      Side note: Ah, the things you find with Spotlight.

  2. Sergei
    Permalink to comment#

    hey Chris, umm, isn’t “developement” spelt “development”?

  3. Jack
    Permalink to comment#

    Will LIVERELOAD work on WordPress files that aren’t local (i.e. server)?

  4. Henry
    Permalink to comment#

    I’m your fan man!!! Thank you soo much!
    Finally i can work with slim in static pages!

  5. Michael Roher
    Permalink to comment#

    Didn’t work for me..

    • Michael Roher
      Permalink to comment#

      UPDATE: Working. Had to refresh browser and LiveReload app.

  6. Henry Oliver
    Permalink to comment#

    Hi, i work with STHML files, that the way i use includes. So the LiveReload don’t watch these files.
    Its any configuration that can i do to solve this problem?
    Work fine in my css files, when i saved the page automatically shows the changes, but when i saved my SHTML file nothing happen.

    Thank you;

    • Henry Oliver
      Permalink to comment#

      Hey, sure! When you click the monitoring Options button, you’ll be able to enter additional extensions to monitor.

      Now its works!! :)

  7. Matt Banks
    Permalink to comment#

    Great tips here! Would love to see a screencast on using SASS/LESS with WordPress or another CMS (eg should you compile locally and upload the CSS file, or have Ruby watch the theme directory and compile when changes or uploaded, etc).

    • Evandro Pastor
      Permalink to comment#

      I Agree with Matt. It will be nice to see such screencast. :D

  8. supprof
    Permalink to comment#

    ! thank you criss
    how about using custom posts and taxonomy and hooks in wordpress
    thank you

  9. arnold
    Permalink to comment#

    I dont know but you still got audience who uses Windows ??

  10. adam
    Permalink to comment#

    awesome! I’m going to be using this for sure!
    I need to learn more about LESS and JADE…
    Chris, please do some videos on these :)

  11. CJ
    Permalink to comment#

    Can you use LiveReload to work locally with WordPress files thru MAMP?

  12. Aaron Stone
    Permalink to comment#

    The #BADA55 was a funny touch…

    Funny elements in videos make them more enjoyable and sassy…

  13. Jack
    Permalink to comment#

    Can you use LIVE Reload if your wordpress theme is not running locally but on a server like Media Temple?

  14. Ando
    Permalink to comment#

    Linux versions would also be greatly appreciated by some people. :)

    • Jan-Marten de Boer
      Permalink to comment#

      It’s not too difficult to write our own daemon for that

  15. Sam
    Permalink to comment#

    You really made my day :)

  16. Andrew

    Does LiveReload 2.3.5 still automatically place the icon in the menu bar?

    When I open the app, nothing appears there, so really not sure how to get it to watch folders (this video 1:47s)

    Any thoughts, is it just me :)?

  17. Jon
    Permalink to comment#

    Live Reload is also available for Windows as a Sublime Text plugin: Live Reload for Sublime Text

  18. Mangat
    Permalink to comment#

    Hello every body,
    I am a new guy to the css-tricks and also for web designing.
    I want to use the dreamweaver
    i need
    tongal menu bar in html and css
    place send me filles

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.