Live code preview in Sublime Text 2 and 3

Don't want to refresh page every time you change code or content? Me neither.

Natasha Pristovsek

3 minute read

Beginner programmers and sometimes even senior front-end developers need a lot of code fixing and figuring out of how to make something work. Clicking and refreshing button everytime they change something …is downright dounting.

Having that instant visual feedback, saves you a lot of time when trying to figure something out or how it fits. Follow along these steps to set it up yourself.

1. Download Sublime Text

If you’re not using Sublime Text as your prefered choice of editor yet, you totally should. Nuff said. It’s free to use for unlimited time in trial mode but you can also buy a licence and support the developer for 70$.

If you already have Sublime text 2 or Sublime Text 3 installed, move on right along to the next step.

2. Install Sublime Text Package Manager

This is something you might already have installed but just in case you don’t or you’re new to Sublime Text, here is how you do it: Visit: Package Control

Copy code depending on wheather you have Sublime Text 2 or Sublime Text 3, then paste it into Sublime Text console. To access console, go to menu bar View -> Show Console

Sublime Text - Show Console

Package manager will allow you to install various add-ons for Sublime Text editor that fit your needs and coding language,

If you already have Sublime Text Package Manager installed, move on to the next step.

3. Install Live Reload Sublime Text plugin

Press CMD + SHIFT + P keys when in Sublime Text or alternatively, go to Sublime Text -> Preferences -> Package Control in the menu bar. This will open window where you simply type: “INSTALL PACKAGE” and hit enter. Then simply type LiveReload and install it.

live reload package

4. Download Livereload Chrome plugin

Here you can find the newest versions of Live Reload for both Mac OSX and Windows. Link to download Plugin for Chrome

Chrome LiveReload plugin

Once installed, go to preferences -> click extensions on lefthand menu and find Livereload. tick “Allow access to file URLs” on and you’re all set! Live reload permission

Go back to Sublime Text and make some changes in your code - watch it appear live in browser! Almost magic!

5. IF NOT WORKING - Download Livereload (free)

When the above doesn’t work - and it doesn’t for some users, consider doing this last (simple) step that makes it work for most.

Live Reload is not a free plugin but developers are really nice and are letting you use it in trial mode for unlimited time. Of course if you find it useful, support them by paying for the product (10USD in App store).

Here is the link: Download LiveReload or Direct Link for Mac OSx

Install and open Livereload app, add folder you want it to watch for changes (the plus lefthand side at the bottom and select folder with HTML/CSS files you’re working on). Make sure to tick “Compile SASS, LESS, Stylus, CoffeeScript and others” option.

Livereload

Now go back to Sublime Text and make some changes in your code - watch it appear live in browser! Almost magic!

comments powered by Disqus