zen-coding Online demonstration

examples Click any example to see it in action

Input Expands into
a <a></a>
Use '.' to indicate the class of the element being created
div.name <div class="name"></div>
div.one.two <div class="one two"></div>
Use '#' to indicate the id of the element being created
div#name <div id="name"></div>
Use '>' to indicate the next elements should be created as children
head>link <head><link></link></head>
table>tr>td <table><tr><td></td></tr></table>
ul#name>li.item <ul id="name"><li class="item"></li></ul>
Use '+' to indicate the next elments should be created as siblings
p+p <p></p><p></p>
ul.menu>li.one+li.two <ul class="menu"><li class="one"></li><li class="two"></li></ul>
Use '*' to indicate an element should be created multiple times
p*3 <p></p><p></p><p></p>
ul#name>li.item*3 <ul id="name"><li class="item"></li><li class="item"></li><li class="item"></li></ul>
Use '$' to output the index of the current element (when generating multiple elements with '*')
p.name-$*3 <p class="name-1"></p><p class="name-2"></p><p class="name-3"></p>
select>option#item-$*3 <select><option id="item-1"></option><option id="item-2"></option><option id="item-3"></option></select>

Click on an example at right, to see how a tiny input expands into a useful output.

zen-coding is a neat way to write markup very quickly.

zen-coding is a set of IDE plugins to perform hi-speed HTML and CSS coding

zen-coding was created by Sergey Chikuyonok.

It is available as a plugin that works with Aptana, TextMate, Coda, Netbeans, TopStyle, Web IDE, Sublime and Espresso. A separate implementation works with emacs.


This page uses the source code from the original Aptana plugin, slightly modified to work in a browser, rather than an IDE. Those modifications are available, under GPL

See also, article at secretGeek.net, and the World's Simplest Code Generator.