The new Handcraft is here!

Handcraft gets Zen Coding

If you’re not familiar with Zen Coding, here’s a brief description taken from its homepage:

Zen Coding is an editor plugin for high-speed [HTML] coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:


…can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>

In addition to this, Zen Coding adds a few keyboard shortcuts for things like selecting a tag’s inner or outer contents, increasing numeric values in a css rule or surrounding a text selection with an html tag (or better yet; a Zen Coding abbreviation).

Integrating Zen Coding into Handcraft really speeds up HTML prototyping and makes a great addition to the already syntax highlighted, context-aware code completing editing experience that Handcraft offers. To give all users a clear overview of the keyboard shortcuts available, we’ve added an overlay similar to Gmail by the simple press of “?”.


Handcraft's keyboard shortcuts

Handcraft's keyboard shortcuts

For a quick demo of Zen Coding (without Handcraft’s CSCC code completion), go to

New to Handcraft? Sign up for free (or sign in with Google) and you’ll be trying out this fantastic editing experience in under half a minute.

No Comments

Ping RSS

Be the first to respond!

Leave a reply

You must be logged in to post a comment.