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

On this page…

    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.

    Install a browser selection tool

    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:

    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:

    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:

    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.


    1. Thanks to Rich B. for letting me know that I needed to change $File to $file

    2. This is a very bad key command, as Command-B has always been used for Bold on the Mac (& likewise with Ctrl-B on Windows). If the key command doesn't work for you, you'll need to change it (that's a topic for another lesson) or use the menus. 

    WebSanity Top Secret