Want to know how fast is your server? Check out our all new tool - How Fast is My Server?

How to Use Emmet LiveStyle for Atom Editor [Tutorial]


As discussed in our earlier article Emmet Livestyle is an essential tool for web developers to speed up CSS coding. Emmet Livestyle is a bi-directional real-time edit tool for CSS, LESS and SCSS. It will automatically update your CSS stylesheet when you make changes in Chrome and vice versa. Emmet Livestyle plugin is now available for Atom editor along with the Sublime Text.

Here is how to get started with Emmet LiveStyle for Atom editor. Emmet LiveStyle not working? We have also discussed about how to fix Emmet LiveStyle if it is not working for you.

Also read:

How to Use Emmet LiveStyle for Atom Editor

Go through the following steps to use emmet livestyle for Atom code editor

  1. Open Atom Editor and go to “File > Settings”
  2. Click on “Install” tab and search for “emmet-livestyle”
  3. Install the livestyle package for Atom
  4. Download the Emmet Livestyle tool from the io and install it
  5. Now install the Livestyle extension for Google Chrome
  6. That’s all, run the Emmet Livestyle app from your desktop and enable livestyle from the Chrome. Now make changes to your CSS in Google Chrome and see your stylesheet which updates automatically.
    Emmet LiveStyle for Atom Editor

Emmet LiveStyle Not Working? Here is How to Fix

LiveStyle not working? Not updating the stylesheet? Here is a fix.

  1. Click on Google Chrome menu, then “More tools > Extensions”
  2. Scroll down to Emmet LiveStyle
  3. Now check on “Allow access to file URLs
  4. Restart the LiveStyle App and it should be working now.


Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.


Leave a Reply


How to Use Emmet LiveStyle for Atom Editor [Tutorial]

by Shrinivas time to read: 1 min
0