By Andrey Tarantsov
Open the Mac App Store to buy and download apps.
NOTE: If you experience sluggishness or Ruby problems on 10.9 Mavericks, please contact email@example.com for a solution. (Update coming to App Store soon.)
The essential web developer tool: When you save a file, LiveReload preprocesses it as needed and refreshes the browser automatically.
Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.
Compiles CoffeeScript/IcedCoffeeScript, Compass/SASS, LESS, Stylus, HAML, Jade, SLIM.
Works great with many popular editors: Espresso, Coda 1, TextMate, Sublime Text, BBEdit, SubEthaEdit.
Tested with Rails, Drupal, WordPress, Joomla, ExpessionEngine, Express.
Works with multiple browsers, mobile devices and simulators, even inside preview windows of apps like Espresso and Coda 1.
Please read about your specific usage scenarios, frameworks, compilers, editors and browsers in our knowledge base on help.livereload.com.
By default, LiveReload lives in the system menu bar on 10.7+ and in the Dock on 10.6. You can change that by clicking the gears button in the main window's title bar.
1. Add your project folder using the plus button at the bottom (or drag'n'drop).
2. Insert the provided snippet or install the browser extensions.
3. Open the page to test in your browser. Click the browser extension toolbar button if going the extensions route.
Everything should be up and running now. A red dot in the menu bar icon indicates that the browser is connected to LiveReload.
QUESTIONS? IDEAS? NOT SURE? THINGS NOT GOING WELL? Just email firstname.lastname@example.org (or click the Support link on this page).
THINGS YOU NEED TO KNOW:
Only monitors files with specified extensions. A nice fat list is hard-coded, but you can add your own ones in monitoring options.
CSS/image changes are applied live. Changing any other file (including HTML, PHP, Ruby, etc) triggers an automatic page reload.
Local files (file: protocol) are supported with some limitations.
Compilers often work out of the box, but some projects need additional settings or adjustments.
You can add support for your own compilers and editors.
REMOTE SERVER WORKFLOWS (if your development web site is running remotely):
Please read the knowledge base (search for “remote”).
1. LiveReload only monitors the local file system, so the code you edit has to be there somehow.
2. Enable “Override URLs to serve modified CSS from localhost” in monitoring options.
3. Also configure “Wait X seconds before doing a full page reload” with an appropriate delay.
4. This supports Espresso, Sublime SFTP plugin and similar cases.
5. You can also use the same options to preview your local CSS changes against a live web site.
6. LiveReload is not an FTP/SFTP client, so if you use the compilers, you need to figure out how to upload their output.
What's New in Version 2.3.27
Most known bugs are resolved in v2.3.27:
* outdated compilers and libraries updated (please contact support if your project is incompatible with the bundled libraries)
* live reloading works in projects that use prefixfree JS library
* Sass imports resolution bugs
* URL overriding bugs
* slowness in certain cases (esp with many changes flowing in)
* output file names ignored by CoffeeScript
* various crashes
I'm working on the next version; please be sure to contact support on feedback.livereload.com if you still have any problems.
Great app, but still missing proper RVM and Gemsets support
The app usually does the job, but for those of us developing on the bleeding edge of compass/sass/susy and wants to make use of different toolsets and different versions on different projects, you have to jump through hoops to get everything working. I'm giving it 4 stars, only because of this missing feature that I consider key to a multi-project development enviromnent.
Really looking forward to better RVM and .ruby-gemset detection and support in version 3.0, and probably wouldnt have bought this if I had realized it wasn't already included.
Great to see this updated!
As one of the more recent converts to the LiveReload fold, I'm glad to see it continue to evolve. LiveReload is a "one-trick" app that does its one trick incredibly well, and saves an ever-accumulating amount of time during the Web development process. The developer has made its source available, but it's well worth the low cost to support its ongoing development here, too. Thanks, Andrey!
A Must-have for Web Designers
As a front-end designer, I'd be lost without LiveReload. The application is straightforward, simple to use, and extremely valuable in speeding up any web design workflow. SASS compiles into CSS and instantly loads in the browser without even refreshing the page—all without manually watching files via the Terminal.
For a mere $10, I can't recommend this application enough.