🏳️Emmet — the essential toolkit for web-developers

Website faviconemmet.io

Emmet — the essential toolkit for web-developers

================================================

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

<!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$\*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML wait: 600 run: emmet.expand\_abbreviation wait: 1000 tooltip: Traverse between important code points with “Next/Previous Edit Point” action wait: 1000 run: {command: 'emmet.next\_edit\_point', times: 7} wait: 1000 tooltip: Select tags with “Match Tag Pair” action run: {command: 'emmet.match\_pair\_outward', times: 3} wait: 1000 moveTo: 102 tooltip: Select important parts with “Select Next/Previous Item” action run: {command: 'emmet.select\_next\_item', times: 7, beforeDelay: 300} wait: 2000 moveTo: 95 wait: 1000 tooltip: Quickly comment full tag with “Toggle Comment” action run: {command: 'emmet.toggle\_comment', times: 2, beforeDelay: 1000}

<!doctype html>

<html lang\="en"\>

<head\>

    <title\>Demo</title\>

</head\>

<body\>

</body\>

</html\>

â–¶ Watch demo

*   ### HTML from CSS

    You’ve already known how to use Emmet abbreviations: its [syntax](http://docs.emmet.io/abbreviations/) is inspired by CSS selectors.

*   ### Dynamic snippets

    Each abbreviation is transformed in runtime: just slightly change its name [to get a different result](http://docs.emmet.io/css-abbreviations/).

*   ### Ultra-fast coding

    With Emmet you can quickly [write a bunch of code](http://docs.emmet.io/actions/expand-abbreviation/), [wrap code with new tags](http://docs.emmet.io/actions/wrap-with-abbreviation/), quickly [traverse](http://docs.emmet.io/actions/go-to-edit-point/) and [select](http://docs.emmet.io/actions/select-item/) important code parts [and more](http://docs.emmet.io/actions/)!

*   ### Customizable

    Users can easily add new snippets and fine-tune Emmet experience with just a [few JSON files](http://docs.emmet.io/customization/).

*   ### Platform for new tools

    Dig into [Emmet source code](https://github.com/emmetio/emmet) and re-use its modules to create your very own and unique actions.

*   ### Highly portable

    Emmet is written in pure JavaScript and works across different platforms: web browser, Node.js, Microsoft WSH and Mozilla Rhino.

[Download plugin for your favourite editor](/download/)