Over a million developers have joined DZone.

Emmet LiveStyle Offers Bi-directional Live CSS Editing

DZone's Guide to

Emmet LiveStyle Offers Bi-directional Live CSS Editing

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Emmet, best known for their plugins for popular text editors like Sublime Text, yesterday officially announced the beta version of their LiveStyle CSS editor.

Other text editors like LiveReload, CodeKit, and Brackets have done live-refreshing CSS editing before, but what makes LiveStyle cool is that it doesn't require local files and, rather than refreshing the entire CSS file rendered in the browser every time a change is made, it actually listens to the editor and browser and maps the changes being made to the source file in real-time.

LiveStyle looks like it will be most appealing to those interested in responsive design, as you can re-size windows, make changes in the inspector, and those changes will be automatically reflected in the source file. You can also live-edit different sites, so you can edit the desktop and mobile versions of your site at the same time.

Right now it only works for Chrome, Safari, and Sublime Text, but more are coming soon. Check out the tech demo here:

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}