Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We have a brand new thing for y’all that you can start using immediately: custom tab triggers!

For example, you could now easily set up the editor so that when you type 1337 then press tab, it could expand into:

<h1>I am the <strong>greatest developer<strong> ever.</h1>

Or, perhaps just slightly more practically… you could make sitenav expand into:

<nav class="site-nav">
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li><a href="#0">Contact</a></li>

You’d do this by going into your Editor Settings and adding it as a snippet:

These custom snippets are in addition to regular Emmet. Meaning you don’t need to make snippets for generic HTML. In Emmet, if you type h1 and tab, you’ll get a <h1></h1>, like you always have. No need for a custom snippet for that.

The Documentation

Custom snippets work in both Pens and Projects. They basically do their thing in the editor anywhere you can edit code, as long as you are logged in.

To see everything they are capable of, check out the documentation.

The documentation covers the ins and outs of using them, including:

  • the syntax you use to create the snippets
  • how to create multi-line snippets
  • how to include placeholder text, and much more.

Custom Snippets work for both HTML and CSS

Custom snippets are broken into separate sections for HTML and CSS. That way, you can have custom triggers that only expand in the HTML editor, or only expand in the CSS editor. Perhaps you have a favorite block of CSS that you write a lot.

For example, I have a snippet fullfill that expands into:

top: 0;
left: 0;
width: 100%;
height: 100%;

Here are some more ideas for both:

We’ve upgraded to Emmet 2

It’s a big effort by creator Sergey Chikuyonok to break up it up into smaller parts:

Unlike current, monolithic implementation, new Emmet is a set of small composable and reusable parts. As a result, the abbreviation expander itself is just 66 kb minified (22 kb gzipped) instead of 218/64 kb of the previous version.


Emmet is what powers the custom snippets as well. That means you can (and probably should) use the Emmet syntax for HTML expansions. Doing it that way means that your snippets will expand into the correct language. For example, when you have Pug preprocessor turned on, your expansions will expand into Pug format.

You can turn Emmet on and off.

This wasn’t possible before. Now, if you don’t like Emmet or custom snippets at all, you can just uncheck the checkbox and turn off Emmet entirely.

Editing HTML tags changes both the opening and closing tags

As a little bonus feature of the new Emmet, HTML tag editing has gotten a little easier. Now, the opening and closing tags edit at the same time.

Share yours!

I know I’m planning to make a full set of SVG snippets, where the basic shapes all expand into having all their attributes, like:

<rect x="" y="" width="" height=""></rect>

What are you gonna make?