How do I install LiveReload on Sublime Text 3?

Question

I'm using Sublime Text 3 and want to use LiveReload. I have a browser plugin for Chrome already installed. Node.js is also installed.

For Sublime Text 3 Live Reload this plugin must be installed: https://github.com/dz0ny/LiveReload-sublimetext2

How can I install it on Windows 7? It just says something about Linux and OSX users.

Bergstrom

I don't know whether they are identical versions (the github version may be more up to date), but the LiveReload plugin is available using the SublimeText Package Control. i.e (Tools -> Command Palette) then open Package Control: Install Package then select LiveReload to install it. – Hindu

Yes, but unfortunately only works with Sublime Text 2. :-( Therefore, there is a new version. But I do not know how to install it. – Bergstrom

The link is for sublime text plugin LiveReload is broken, the repository does not exist any more. Please edit your post accordingly. – Funky

Answer 1

Platform I used: Linux Mint 17+
I want to thank http://anthozano.fr/livereload-pour-sublime-text-3/. I was able to run live reload on sublime text 3 with the instructions in the website. However, the website is written in French (i believe - Google translate said), so I thought I could write the steps here.

First install sublime text 3 from here http://www.sublimetext.com/3 or follow your own way you prefer (I did it with Linux mint Package manager).

Secondly, install package control from here https://packagecontrol.io/installation#st3 (instruction is clearly given in the website so I did not explain it much).

Third, open package control (Shortcut : Ctrl+Shift+P) and search for Package Control: Add Repository

Now comes a region to enter URL at bottom part of sublime text 3 window. Enter https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json.

Again, open package control and search for Package Control: Install Package and then search for LiveReload in the upcoming window.

Configure LiveReload Package Setting at Preferences > Package Settings > LiveReload > Setting - Default and paste this :

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }
    

Now for your browser, install LiveReload plug in as below :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Don't forget to enable the LiveReload plugin in the browser once you have installed it, so you can see the code changes reflected in the browser right away.

Note: Chrome users, for LiveReload to support file:// pages, go to chrome://extensions/, and check off Allow access to file URLs.

Snapshot taken from Safari for Mac OSX:

Enjoy, Live Reload with Sublime Text 3.

Thanks to Anthony Lozano for http://anthozano.fr/livereload-pour-sublime-text-3/.

Rebellious

Hey @roshanPoudyal, this is working correctly. Thanks :-) – Whitefaced

@Whitefaced , happy to help. – Rebellious

You need Allow access to file URLs from the chrome extensions page. – Hypno

On my system, it seems that the chrome plugin is not need. I can use livereload without the plugin. – Funky

Worked for the first time. But, when I tried it after closing the browser and Sublime Tex, its not working . – Fiftyfifty

Answer 2

The plugin mentioned in the comments, LiveReload, is available for both ST2 and ST3, as indicated by the graphic on the Package Control link I just provided. It also works just fine on Windows, as the majority of its users are on that platform. The Github repository may be named "LiveReload-sublimetext2", but if you read the documentation it clearly mentions ST3 as well. The Linux and OS X instructions in the readme are for installation using git. You can also use git on Windows (if it's installed), but the author apparently didn't feel like putting explicit instructions in the README. Instead, the preferred method of installation is via Package Control, as outlined above by kind user DaV. If his comment disappears, do this:

1. Open Sublime Text 3.
2. Open the Command Palette with CtrlShiftP.
3. Type pci to bring up Package Control: Install Package. Hit Enter.
4. Type in livereload and ensure that the desired package is selected. If not, use arrow keys. Hit Enter.
5. Read the documentation and either add the appropriate JavaScript to your documents, or download a browser plugin (which you seem to have already done, so good for you).
6. Go develop.

Handclap

The package name is actually LiveReload-sublimetext3. Edit to your post may be needed. – Funky

Answer 3

Instead of live reload, i'd suggest browser sync, does the same thing only better and without the need for annoying browser plugins.

https://www.youtube.com/watch?v=Rv5f_v5gqw4

Mansell

Answer 4

LiveReload Sublime text3： https://github.com/Grafikart/ST3-LiveReload

But the usage seems to have changed: Enable desired plug-ins via Command Palette (Ctrl+Shift+P) add livereload.js to you html document.

Intendment

Answer 5

A long time has passed. Now, for sublime text 3, the most up to date LiveReload plugin can be found here.

I encounter this problem when I tried to set up live preview of markdown files (I haven't tested on other file types). I think you may be interested.

• First, you need to install sublimetext-markdown-preview. Follow instructions there on how to preview in brower.

  use cmd+shift+P then Markdown Preview to show the follow commands (you will be prompted to select which parser you prefer):

  • Markdown Preview: Preview in Browser

• Use package control to install LiveReload.

  With Package Control:

  Run “Package Control: Install Package” command, find and install LiveReload >plugin. Restart ST editor (if required)

• Edit the LiveReload plugin user setting under Preferences->Package Settings->LiveReload->Setting - User, add the following:

  { "enabled_plugins": [ "SimpleReloadPlugin" ] }

Now you can use livereload as you edit your markdown files.

How to find the exact plugin name

The github repository is unclear how to set the plugin in user settings, it just give a list of supported plugins without giving their actual names. After inspecting the package (see the image below), I found the exact names for those plugins:

1. CompassPlugin
2. LESSPlugin
3. CoffeescriptPlugin
4. SimpleReloadPlugin
5. SimpleReloadPluginDelay

Funky