Does the Sublime Text 2 editor support real time HTML & CSS preview?

Question

>>> [Take a look on my answer here](http://stackoverflow.com/questions/19985105/does-sublime-text-support-live-editing-of-css-sass-files/22754714#22754714) (OSX only) — Flavien Volken, Mar 31 '14 at 12:33
I would not have developed [LIVEditor](http://liveditor.com) if sublime text has an **seamlessly integrated** real-time html and css preview. — Edwin Yip, Apr 01 '14 at 13:00

score 41 · Answer 1 · edited May 23 '17 at 12:16

41

There's a package for this: Browser Refresh by Giovanni Collazo. It supports OS X and Windows 7, and all major browsers.
You can install it via Package Control (or manually) and trigger it with super+shift+r in Sublime Text 2.

I haven't tested it personally since I use CodeKit for this functionality, but it seems popular.

Update:

Windows XP-compatible software

LiveReload (Windows version is pre-alpha) - there is also a supporting Sublime Text 2 package
XRefresh - deprecated version of LiveReload (worth mentioning for stable XP compatibility)
AutoHotKey - example
VBS script - triggered by a keyboard shortcut

Chrome extensions

Firefox addons

IE addons

AutoRefresher

Note: Browser extensions will refresh at regular intervals, not when you save a file.

edited May 23 '17 at 12:16

Community

1
1

answered Oct 10 '12 at 22:24

Sara

8,222
1
37
52

thanks. But currently, it is for Mac Only & I am on windows xp. – user1528138 Oct 11 '12 at 00:29
What browser are you using? (For any future readers, the plugin *is* Windows 7 compatible) – Sara Oct 11 '12 at 00:35
1

I've updated my answer with some Windows XP-compatible alternatives, hopefully one of those will help. – Sara Oct 11 '12 at 01:05
Nice answer and practical. Thanks Sara +1 ;) – Saeed Neamati Jul 15 '13 at 10:20
All chrome plugin are outdated – maysi Mar 17 '15 at 09:21
@Simon I've added a few alternatives. – Sara Apr 06 '15 at 15:11

score 0 · Answer 2 · answered Oct 10 '12 at 17:01

0

I have found the easiest way to use Sublime with live HTML and CSS is to install WAMP(www.wampserver.com/en/) or XAMPP(www.apachefriends.org/en/xampp.html) which installs an Apache web server, PHP and Mysql server on your computer. Then you can edit your files in Sublime, and so long as they are located within the Apache web root folder (i believe its wamp/htdocs or xampp/htdocs) then you can go to localhost//filename.html and there is your html files. Save in Sublime and refresh the page and there are your changes.

You can also just open up the html file in Chrome or Firefox but selecting Open With... however, i have found that sometimes if you have dynamic content or links, they might not work correctly.

answered Oct 10 '12 at 17:01

koerbcm

340
1
2
13

2

Thanks for info. Actually, what I get from your answer is that, after doing this procedure, there is still "Need" to Press "Alt+Tab" to Switch From Text Editor to Browser & press F5 to Refresh the web page. What I want to know is that, While coding Html & Css, Whether Sublime Text 2 Editor can Preview "it" Real Time in its Adjacent Window Or Not? – user1528138 Oct 10 '12 at 17:53
I don't believe there is a browser within Sublime, however, with as many packages as they have, there might be one or sometime in the future. I did find this video about using Builds to preview your work in different browsers. Hope this helps. http://www.youtube.com/watch?v=u8ufaPD-AnQ – koerbcm Oct 10 '12 at 18:32

Does the Sublime Text 2 editor support real time HTML & CSS preview?

2 Answers2

Linked