10

Does Sublime Text support live editing of files?

I'm looking for a better workflow. I really like Sublime Text, but recently I've been spoiled by the "Live Editing" capabilites of tools like Codepen.io and (recently tested) Adobe Brackets. When I go back to Sublime, even Live Reload seems clunky in comparision.

Live Reload: Press Save To Preview..
I'm using the LiveReload Chrome plugin, and depending on the project (Ruby or JS) I'll use Guard or Grunt to watch system files. I like LiveReload. But having to press 'save' on a file to see its changes in the browser is driving me nuts. Even with CSS style injection (no full browser reload), I'm flying blind in comparision to Codepen and Brackets which have instant updates as you type.

Other Tools
** GUI Tools **: I've heard of tools like Codekit and Hammer. Please correct me if I'm wrong, but they seem to do exactly what Gaurd and Grunt do—except no command line.

** Chome Tools Spaces **: The ability to edit Sass in the browser is cool. I've set this up, but I rarely use it. Editing HTML/CSS/Sass in Sublime Text is superior to Chrome Tools in every way. And to that point, it is far superior to Adobe Brackets which is why I don't (at this point) considering using it (Also it seems most of Brackets 'cool features' work on vanilla CSS, and not on Sass).

**Live Style: I've tried this, and I just can't get it to work.

I must have Googled "Live editing Sublime", "Live Refresh Codepen Sublime Text", etc.. a thousand times this year and results have been pretty lousy.

If anyone has any gems of information regard this to add to this PLEASE POST THEM!

6
  • stackoverflow.com/questions/12823873/…
    – Pier
    Commented Nov 14, 2013 at 20:10
  • Also, it seems Live Style is only for ST3 which is still in beta.
    – Pier
    Commented Nov 14, 2013 at 20:11
  • I'm using ST3, I can't get LS to work. The build tool I'm using, Middleman, puts the CSS generated from Sass in a cache dir (I believe). Maybe that's why.
    – GN.
    Commented Nov 14, 2013 at 20:43
  • Right, that post gives the staple answers everywhere on the internets: LiveReload, AutoReload, etc. AutoReload refreshes the browser which is a step backward from style injection. There must be some clever person out there equally annoyed that was figured something out.
    – GN.
    Commented Nov 14, 2013 at 20:47
  • You could use Live Reload and stackoverflow.com/questions/15277166/… to save every so often.
    – d_rail
    Commented Nov 20, 2013 at 3:20

1 Answer 1

2

Yes it does, all you need is takana: https://github.com/mechio/takana

This tool creates a little server which interacts in live the the loaded css of the page. All you need is to setup the server and add the javascript snippet to your html code (you will obviously remove it afterwards…). For now only OSX, live editing is even working on different browsers. Welcome to the awesome!

2
  • I haven't been able to get Takana to work with my build folder. No idea why. Better docs please!
    – JCraine
    Commented May 13, 2014 at 12:19
  • @JCraine take a look here I explained the whole process using the Meteor framework. Perhaps you just omitted the javascript line or provided the wrong source folder for the css Commented May 19, 2014 at 7:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.