Skip to main content

Amazing plug-in for live bi-directional CSS editing

Emmet LiveStyle is a new plug-in that puts a different spin on live CSS editing, overcoming several of the limitations of existing tools.

Instead of replacing changes in your files, it maps them from one source to another, making it possible to associate two completely different CSS sources for live editing.

This means that, even if the CSS source in your browser is minified, you can still do bi-directional live editing with LiveStyle. Also, because it doesn’t work with your files directly, you don’t need to keep them in your local file system – they can be opened from an FTP location, or anywhere else.

A member of the Emmet team explained: “While other tools simply swap the contents of the CSS files, LiveStyle patches them. Every time you change some CSS, LiveStyle parses it into a tree, compares it with the previous state and creates a special patch that describes how the CSS was changed."

“Source patching also makes it possible to map changes from preprocessors (like LESS and Sass) directly into CSS and vice versa. This is shown in the demo video, but currently it’s just an experiment and requires additional investigation and funding,” he added.

LiveStyle displays your changes as you type, with no need to refresh the page or save your files. When working on responsive designs, a page can be opened in multiple windows and changes will be applied to every one. Edits made in developer tools in one window are applied to all. It’s even possible to simultaneously live-edit different websites that share the same CSS code base.

Emmet LiveStyle will be a paid-for product when it's finished, but it's available for free while it's in public beta. It's currently available for Safari and Chrome, but more browsers are planned to be available.

Take a look at this video for a demonstration of some impressive features:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.