Emmet (formerly Zen Coding)

Posted by serge.che on 2010-02-15 06:45 | Staff Pick!
Sergey Chikuyonok
Sun, 2013-03-24 09:46
  • : 4.1 - 8.*
  • : 4.1 - 8.*

A web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Read more on http://emmet.io/

When installed, Emmet actions will be available under Tools menu. To bind keyboard shortcuts, go to Preferences > Editor > Key bindings and filter commands by "Emmet" prefix.


Emmet automatically loads extensions from emmet folder of system’s user HOME folder.

artyv | Wed, 2010-02-17 01:55

Big thanks!

ActiveState Staff
Wed, 2010-03-24 09:42

What do people in Komodo and in other editors use for the Zen command keybindings?

ron.stewart | Thu, 2010-03-25 13:20

I'm new to Zen but can see the power here... I've poked a bit at trying to find keystrokes that I can use quickly (and remember!) for most of the commands; here's what I've come up with so far:

Expand abbreviation: ctrl+shift+X
Balance tag: (none yet)
Balance tag inward: (none yet)
Wrap with abbreviation: ctrl+shift+W
Next edit point: ctrl+shift+N
Previous edit point: ctrl+shift+P
Merge lines: (none yet)
Remove tag: ctrl+shift+R
Split/join tag: ctrl+shift+S
Toggle comment: ctrl+shift+C

I'm curious to see what others are using... particularly for the three that I've indicated I don't yet have keystrokes assigned to. Two of those (balance and merge) are of particular interest to me.

One other thing I've noticed: the key mapping for "Toggle Comment" doesn't show on the Tools > Zen Coding" menu, whereas all of the others do. Minor UI bug, perhaps?

Thanks to Serge for an amazing add-on and to the AS guys for including this in their list of picks!


jh | Fri, 2010-04-02 01:09

Toggle comment is somewhat redundant. There is already ctrl+3 and ctrl+shift+3 in Komodo which works in any supported language.

Well, here are mine:

Expand abbreviation: ctrl+alt+t (ctrl+t expands Komodo abbrs)
Balance tag: ctrl+alt+right
Balance tag inward: ctrl+alt+left
Wrap with abbr: ctrl+alt+w
Next edit point: ctrl+alt+n
Previous edit point: ctrl+alt+b

jh | Fri, 2010-04-02 01:21

a) Expand abbreviation stops working if there are unicode characters (e.g. Chinese characters).

b) "script" expands to:
<script type="text/javascript"></script>

"rel" expands to:
<link rel="stylesheet" href="" />

The type attribute is useless. The former gets it wrong and the latter gets it right.

c) Expanding "button>div" results in:


marcodelpivio | Sun, 2010-10-31 06:43

thank you very much!!!

wombat_au | Sat, 2012-01-14 02:08

Great assistant suite.

Could really do with an "un-merge" option for merged lines.

NOTE I have discovered at least one major bug in the "lines merge"...
$fRm=$1 if$1;
$fRm= if;

fvtas | Wed, 2012-03-07 11:31

After installing zencoding-0.7-ko_0 in the Komodo Programs folder, I used the Add-on Manager to add it to Komodo. Received the error message: "(null) is incompatible with Komodo Edit 7.0.1"

What do you suggest?

leemour | Thu, 2012-04-26 00:19

How can I fix Zen CSS to work with SASS syntax? It seems to only work with CSS file type selected.

ActiveState Staff
Mon, 2012-10-22 10:45

Komodo 7.1 works with SCSS, so if you're using the braces-variant,
it's available now.

- Eric

ActiveState Staff
Mon, 2012-10-22 10:49

The replaceContent method in zen_editor.js has a call to scimoz.beginUndoAction
that could possibly not be closed if any intervening code throws an

All calls to scimoz.beginUndoAction and scimoz.endUndoAction should be
formulated like so:

try {
   // All code
} finally {

- Eric

oca | Fri, 2013-03-22 17:41

How can I define new snippet for css property?

ActiveState Staff
Mon, 2013-03-25 16:25

Find or create a folder named "Abbreviations", preferably in your own toolbox, and not
in a Komodo Sample folder.

Right-click on "Abbreviations", add folder "CSS"

Right-click on "CSS", add a snippet. Give it a name and contents.

If you want it to fire after typing a space, etc., click the
auto-abbreviation checkbox.

- Eric

coopersita | Wed, 2013-03-27 11:20

I just tried using the key binding of Shift+Tab, and it doesn't work, but when I try something like CTRL+ALT+t, then it work.

mjatharvest | Fri, 2013-04-12 08:39

In Komodo 8 running emmet 1.0.4 I got this error when trying to use Wrap With Abbreviation:


Error while running Emmet action: this.string is undefined


Could this be a bug?

creastat | Wed, 2013-06-19 01:58

In Komodo 8 running emmet 1.0.4
I got this error when trying to use Update Image Size.

[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIFileURL.file]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: chrome://emmet/content/js/io.js :: :: line 60" data: no]

I should do what?

dogbyte | Wed, 2013-09-25 10:39

I have the plug-in installed but how do bind the keyboard shortcuts? For example I'd like to set "Expand Abbreviation" to Tab. Could some please explain? Thanks in advance.

ActiveState Staff
Wed, 2013-09-25 11:33

Right-click on the items you want to bind, choose "Properties",
and click on the "Key Binding" tab.

Komodo will let you supply "Tab" as a keybinding, but it
won't work, because Tab is hardwired to several other
functions already. I've written this up at
http://bugs.activestate.com/show_bug.cgi?id=100657 --
Komodo should complain.

- Eric