By josh / April 25, 2013

View your changes live in a browser while you edit in Sublime Text

Miguel writes:

Sometimes I work with the Coda editor on my Mac, and it lets me edit code in a window and at the same time see in an split second window the preview of this file. Can Sublime do this?

I haven’t seen anything that lets you load a preview of an HTML file in a Sublime tab. That’s usually a feature that is reserved for bigger, IDE-style editors like Aptana, Dreamweaver or Visual Studio.

The closest thing I’ve come across for Sublime is the Live Reload plugin (OS X only).

With Live Reload, you can leave a web browser up on the screen while you work in Sublime. Every time you save a change, the web page automatically refreshes–no need to manually switch windows and reload the site.

This is actually much better than previewing in the editor, because those built-in previewers are never quite like a browser. You could leave the browser up on another monitor, or do a split-screen if you’re working on one monitor.

Plugin of the Week

Today — Insert the current date or time from the Command Palette. Handy for to-do lists, blog posts and journaling. I had to restart Sublime after installation to get it to work.

How-To & Interesting Articles

Hack Sublime for Faster Navigation in Your Rails Project

Markdown Tips, Trick and Links

5 Great Visual Tweaks for Sublime

Tips and Shortcuts for Sublime

Write Your First Sublime Plugin

Find this helpful? There’s a whole lot more where that came from:

http://sublimetexttips.com/newsletter

About the author

josh

4 comments
edu ruiz - August 26, 2014

on windows you can use grunt with livereload to do something like that in the browser, this require some config, I recommend this Chris article to grunt introduction: http://24ways.org/2013/grunt-is-not-weird-and-hard

you can use browserSync (https://www.npmjs.org/package/grunt-browser-sync) to live-reload your css/sass changes in browser on windows with grunt.

on mac, I actually use Codekit (https://incident57.com/codekit) that require no configuration and do all these stuff…

Reply
    edu ruiz - April 13, 2016

    ok, that’s a old comment, just in case someone fall here, now I use gulp with browserSync to this, actually codekit 2 still awesome, but gulp is cross-platform and it is very important to me.

    for gulp tuts, I recommend this gulp post, from zell on css-tricks: https://css-tricks.com/gulp-for-beginners/

    Reply
cnc - September 26, 2014

Browser Refresh does this on Windows. I have it set to Window+S.
https://github.com/gcollazo/BrowserRefresh-Sublime

Reply
Adam - April 13, 2016

Personally I use CodeKit (Mac). It handles compiling and does browser auto-refreshing.
https://incident57.com/codekit/

Reply
Click here to add a comment

Leave a comment: