#129: Emmet (is Awesome)

Emmet is an add-on for code editors that allows you to write HTML and CSS more quickly.

On the HTML front, it allow you to write abbreviations for HTML. For instance


Turns into


When you "expand" it. Expanding happens with a trigger key, usually the TAB key.

This is similar to Zen Coding, and in fact Emmet is an evolution of Zen Coding. You can get pretty fancy with this and it really start to feel natural and powerful after a while. You can get comfortable with it, because Emmet is available on such a huge array of code editors including right on CodePen.

On the CSS front, Emmet offers what is called Fuzzy Search, which allows you to quickly/loosely type CSS properties and values and it will take a stab at expanding it out into what you mean. It usually works pretty good.

For instance, w[TAB] turns into width: ; with the cursor right before the semicolon. ov:h[TAB] turns into overflow: hidden; Pretty rad, you'll just have to give it a try. It's smarter than trying to memorize an exact abbreviation for every single CSS property and value (there are just too many).


  1. User Avatar
    mouhsine bakhich
    Permalink to comment#

    usin emmet with sublimeText 2 and it’s speeding my workflow significantly.

  2. User Avatar
    Permalink to comment#

    Does it work with cloud 9?

  3. User Avatar
    Rick H
    Permalink to comment#

    Nice video. I’ve had it installed in Notepad++ for a bit, and it is pretty sweet. It doesn’t have quite as many shortcuts as the Mac version from the looks of things, but I think I’m going to start using it a bit more.

  4. User Avatar
    Juan Pablo
    Permalink to comment#

    Emmet is awesome, another feature I find myself using is wrap with tags (ctrl + shift + g on windows/sublime text). It even indents the code nicely.

    I actually have no need/desire to use something like jade because of emmet.

  5. User Avatar
    Daniel Krsiak
    Permalink to comment#

    Emmet :) I loved ZenCoding ever since it first became available. This is and should be top most priority thing to use in anyone’s workflow.

  6. User Avatar
    Permalink to comment#

    I really liked this video
    -not because I found about emmet via this video
    -not because There is no other resources online about emmet

    But Because you will not any find any better video than this jump start video tutorial on Emmet

    • User Avatar
      Daniel Krsiak
      Permalink to comment#

      Hi @Samiullah,

      yes I love Chris’ videos too they are great but saying there is no other or better source is a bit disrespectful to the very author of Emmet: Sergey Chikuyonok because he made great DOCS for Emmet.

      And there ARE other good tutorials:

      Tuts+ Emmet
      Goodbye Zen Coding Hello Emmet
      7 Awesome Emmet HTML Time-Saving Tips

      Try to google more next time using “topic you want” + keywords like “docs, intro, tutorial, basics”.

      Cheers mate.

    • User Avatar
      Permalink to comment#

      Hi Yourself @Daniel Krsiak
      Don’t take it seriously man,

      I’ve great respect for the author of emmet and all of the resources that you have mentioned.

      That was just my opinion, and I appreciate this video because it worked for me, not the other’s it’s hard to me to read those long blog post, or dig into those docs.

      Again, I’m sorry, if my words did hurt you.

  7. User Avatar
    Permalink to comment#

    What theme is that? Ur Sublime Text looks nice ;)

  8. User Avatar
    Zach Russell
    Permalink to comment#

    Emmet is AMAZING! I discovered it a few months ago, and it has dramatically increased my workflow. Great idea for sharing.

  9. User Avatar
    Permalink to comment#

    Great video!

    It’s pretty fun, I read about Emmett Till yesterday, thanks to Kanye:

  10. User Avatar
    Permalink to comment#

    Glad to see a shoutout for Emmet, it’s my all time favorite plugin for anything. Can’t believe I missed when CodePen rolled over from Zen.

  11. User Avatar
    Permalink to comment#

    Thanks for this. It helped me finally take the plunge and try out Emmet. For whatever reason, I always had the idea it was much harder to pick up than you show it to be.

  12. User Avatar
    Permalink to comment#

    While “Emmet” glides off the tongue easier than saying “Zen coding,” I will always prefer the latter. Mostly because it actually describes what it is.

    Also, it makes the whiteboard part of the interview shorter.

  13. User Avatar
    Permalink to comment#

    I’m currently studying and I’ve learnt to use Emmet in a very short time as it is very intuitive with the fuzzy searching.
    As for which color scheme he is using the one in the pictures is nexus I’m using the same theme in sublime text 3 but a different color scheme I like a phoenix-Dark Blue as it’s easy to read on my tired eyes.
    “color_scheme”: “Packages/Theme – Phoenix/Color Scheme/Phoenix Dark Blue.tmTheme”,
    “theme”: “Nexus.sublime-theme”

  14. User Avatar
    Permalink to comment#

    Thanks for the video, downloading now. I use it with Brackets editor. The ‘Live’ preview of HTML and CSS in Brackets is awesome and this extension makes it awsomer. Going thru the Code Academy tutorials seems like a pain because of no emmet.

  15. User Avatar
    Permalink to comment#

    Thank you so much for this!

  16. User Avatar
    Permalink to comment#

    Allows* :P you’re the man, Chris!

  17. User Avatar
    Permalink to comment#

    An advice for those who experience delays with Notepad++.
    I started to use it along with notepad++, it was great but everytime I pressed the hotkey there was a significant delay before I saw the desired code popping out… it was nearly frustrating because I write css code very fast.
    So I downloaded Brackets and installed Emmet, everything now works perfectly!

  18. User Avatar
    Permalink to comment#

    If you’re using a CSS preprocessor to handle your autoprefixing, you may want to change your Emmet settings to not automatically include vendor prefixing for you. All you have to do is include "css.autoInsertVendorPrefixes": false in a file named preferences.json. Place the .json file in a folder called extension support. Then change your Emmet.sublime-settings file to point to your .json file by changing extensions_path":"~/emmet/ to "extensions_path": "~/path/to/extension_settings"

  19. User Avatar
    Nathan Shumate
    Permalink to comment#

    Just discovered this today. I am using textmate 2, and just playing around with it for a few mins I can already see how I will be incorporating this into my workflow. Love it! Thanks!

  20. User Avatar
    Permalink to comment#

    great tutorial and I am really enjoy watching it .. very helpful especially when someone try it directly during watching you do this magical abbreviations Stuff and of course you bring to us the perfect meaning of the awesomeness Big Up Bro ..

  21. User Avatar
    Permalink to comment#

    Does EMMITT work in Dreamweaver?

  22. User Avatar
    Permalink to comment#


  23. User Avatar
    Permalink to comment#

    I think now, when we have Jade, emmet doesn’t helpful for HTML…How you think?(Sorry for my English)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.