+10

Dedicated Preview Window for Live CSS editing

Joey Calamaro 6 years ago • updated by Joel Thornton 6 years ago 1
As an interface designer, it would be wonderful to have a "CSSEdit" or "Firebug" style live preview window w/ CSS overriddes. This would allow us to code CSS within Sublime while seeing the effects of our edits in a browser / preview window.

Although there are several apps on the Mac which already do this (Espresso, Coda, CSSEdit, etc.) there's virtually nothing on Windows which allows for this particular workflow.
I'm guessing this probably won't be seen within ST2 for quite some time, as ST2 currently has no in-app browser window support.

However I would think this behavior could be mimicked with an ST2 plugin. Basically, when you run a certain plugin-command, the plugin would open a local HTML file in the system web browser which contains Javascript that handles the "browser side" live-updating of your ST2 buffer. On the ST2 side, the plugin would then write the contents of your current buffer out to a temp file whenever you stop typing (after a brief delay). The browser-side JS would check for modifications to this temp file every second, and whenever a change is detected, update the displayed page using DHTML insertion.