LiveReload 2 proudly presents…

The Web Developer Wonderland

(a happy land where browsers don't need a Refresh button)

CSS edits and image changes apply live.

CoffeeScript, SASS, LESS and others just work.

Citizenship is granted through the Mac App Store.
Windows permanent residency issues are being worked out,
temporary stay already allowed.

What does LiveReload do?

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Downloads

Mac?Get LiveReload 2 on the Mac App Store

Requires OS X 10.6 or later. $9.99. 64-bit only. Got old 32-bit Mac?

Don't miss: Getting started, compilers, plugins, post-processing, support.

Windows?Try LiveReload 0.9.2 Alpha

(Updates automatically. Requires XP+. Getting Started info here.)

Linux?

Try guard-livereload, they use our browser extensions and are pretty cool. Not limited to Linux either; if GUI is not your thing, guard-livereload is the next best choice.

Wonderland green card application

Tell the truth, or face the consequences!





Wanna see the source?

The full source code of LiveReload 2 is available on GitHub: LiveReload2 (Mac on master branch, Windows on node branch), livereload-plugins, livereload-js, livereload-extensions.

Why? Because curiosity is the most basic and important quality of good developers. I believe that everyone benefits from being able to study and tinker with other people's software.

There is no formal license attached. You are free to tinker with it and share the results with your friends, but please don't distribute binaries publicly without my permission. I still expect every user to pay for a license, unless you have a good reason not to.

The browser extensions and livereload.js are under MIT. If you find a nice generic class or a piece of code you'd like to reuse, I will probably be happy to release it under MIT.

Optional: Behind the scenes story on this decision, GPL and indie software.

Fork me on GitHub

Getting Started, or
N things you need to know about LiveReload

  1. LiveReload lives in your menu bar.

  2. It works with Safari, Chrome, Firefox and Mobile Safari. Also Opera if you enable web sockets.

  3. Yes, you heard that right, LiveReload <3 iPhones, iPads and their Simulators if you insert a JavaScript snippet.

  4. If adding a tag is not your thing, and you're only interested in desktop browsers, only on your computer, use our browser extensions.

  5. VMs or testing from other PCs? Same as with mobile devices, really; the JavaScript snippet is your friend. (It is displayed in the LiveReload window, btw, so you can't possibly miss it.)

  6. How do you stop that snippet from making it into production, then? Well, simple: add an IF and check location.host, and then feel free to commit and deploy.

  7. What happens if there's a hideous error in your shiny CoffeeScript or SASS file? LiveReload will display an error notification. It will also detect which editor you are using and display a corresponding “Edit in Submate Wrangler” button.

  8. That edit button goes to great lengths to jump to the exact error location. One would expect any text editor since sed to be able to jump to a specific line number from the command line. Alas, guys like Coda and Espresso make it hard (as in, emulate-command-L-typing-a-number-pressing-enter hard), which works just as well as it sounds.

  9. Back to basics. It is important to know that LiveReload only monitors files with specific extensions. A nice fat list is hard-coded, but you can add your own ones in monitoring settings.

  10. LiveReload has been tested with Rails, Drupal, WordPress, Joomla and ExpessionEngine, all of which are links to articles with useful framework-specific information.

  11. Working with file: protocol? @import quirks? Keyboard shortcuts? Explore our knowledge base to find out more.

  12. If you are ever stuck, there's a nice friendly question mark button in the title bar. Think of it as a modern version of DON'T PANIC.

Compilers

If you are using stuff like CoffeeScript, SASS or LESS (and you should!), LiveReload will compile them for you all right. Just turn it on; LiveReload is controlled by two main checkboxes, so you won't get lost.

LiveReload ships with the following compilers: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade.

If you're using any of the following compilers, please read additional details on our knowledge base:

Plugins

The compilers supported by LiveReload aren't set in stone; they are provided by bundled plugins, and you can add your own ones too. (We even look for them in Dropbox/Library, to save you some trouble if you're using Dropbox and multiple Macs.)

No coding is invoked: write a JSON manifest, copy required files and there you go. You can find all the docs you need in livereload-plugins repository.

Post-processing

LiveReload can invoke a Terminal command after processing changes. Run a Rake/Cake task, a Shell script or anything else you need.

Protip: If you're working with some Ruby stuff and want to use RVM, pick the correct Ruby interpreter in compilation options (which also affect post-processing).

Support

Use the Help & Support button here or visit feedback.livereload.com to read knowledge base articles, vote for features and contact the developers.

Acknowledgements

LiveReload has been inspired by XRefresh, an old Firebug plugin made by our friends at BinaryAge. Their TotalFinder product is awesome, and you might find FireQuery and other free tools useful too.

Who are we?

LiveReload 2.x is developed by Andrey Tarantsov, with an occasional help by Timofey Vasenin.

You can read the history of the first year of LiveReload here.

Cheers!