Reload Original PagePrint PageEmail Page

Set up Sublime Text to Preview Your Code in a Web Browser :: Scott Granneman

Say you're coding HTML in Sublime Text & you want to check how it looks in a browser. Some text editors (BBEdit, for instance) have a feature that lets you open your page in a browser, but Sublime Text does not. Here's how to do it in Sublime Text.

Since you're a web developer, you're going to (a) have more than one web browser on your computer, & (b) want to test your work in more than one browser. To make your life easier, you need to install a browser selection tool. In my my book, Mac OS X Snow Leopard for Power Users, I explained it this way:

I keep several web browsers on my Mac at all times, and I like to switch back and forth between them. In fact, sometimes I'll click on a link and want to open it in Safari, because I want to print the page and I find Safari does that better than any other browser, but a few minutes later I'll click on a link and want to open it in Firefox, because I have that browser set up to handle downloading music and movies. In Mac OS X, as in Windows and Linux, I can specify a default browser for my system, but that browser is used for everything. Wouldn't it be nice if I could choose between browsers on the fly, as needed?

With a browser selection tool, you can! Here are my recommendations:

  • Mac OS X: I used to really love Choosy, but ever since Mountain Lion, it's been broken. So now I use MultiBrowser. It's not as slick, but it works with Mountain Lion, & it's free (although I was happy to pay the $12 for Choosy)
  • Windows: I've never used it, but it appears that you want Browser Chooser.

Install them, configure them to recognize the web browsers on your computer (Firefox, Chrome, Opera, Safari, & IE if you use Windows), & set them as the default web browser on your computer. How you do that depends upon your OS:

  • Mac OS X: Open Safari & then select Safari > Preferences > General. For Default Web Browser, select MultiBrowser.
  • Windows: Click on the Start menu (or its equivalent) & enter Set Your Default Programs in the search box. In the resulting window, select Browser Chooser & then click on Set This Program As Default.

Method 1: Install the View In Browser plugin

This is the easiest method, but I couldn't get it to work on my Mac. Note that I'm assuming you've installed the Package Control extension for Sublime Text.

  1. Press Command-Shift-P (if you use a Mac) & Ctrl-Shift-P (if you use Windows) to open the Command Palette.

  2. Type Install Package until you see that "Package Control: Install Package" is selected. Press Enter.

  3. In the text box, start typing View In Browser until that package is selected. Once it is, press Enter to install it.

  4. Restart Sublime Text.

Now when you have a web page open in Sublime Text, just press Ctrl-Alt-V & your browser selection tool should open, letting you choose which browser to open.

You can read more about the View In Browser package at GitHub.

Method 2: Create a Build System

This is slightly more work, but you also get more control.

  1. In Sublime Text, go to Tools > Build System > New Build System. A new tab will open in Sublime Text named untitled.sublime-build, with the following text in it1:

    {
        "cmd": ["make"]
    }
    
  2. If you use a Mac, replace it with the following:

    {
        "cmd": ["open", "-a", "/Applications/MultiBrowser.app", "$file"]
    }
    

    If you use Windows, replace it with the following:

    {
        "cmd": ["C:\Program Files\", "$file"]
    }
    
  3. Save the file. Name it Choose Browser.sublime-build. Sublime Text should be smart enough to put it in the right place for you, but if it doesn't, save it to the following locations:

    • Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages/User
    • Windows:
  4. Restart Sublime Text.

Now when you want to preview your work in Sublime Text in a web browser, do one of the following:

  • Tools > Build
  • Press Command-B (Mac)2 or Ctrl-B (Windows)

Your browser selection tool should open, allowing to choose the browser in which you want to see your webpage.

You can learn more about Build Systems on Sublime Text at http://www.sublimetext.com/docs/build.