Customer.io

Use Emmet syntax

BetaThis feature is new and we're actively working on it.

The code editor in Design Studio supports Emmet, a shorthand syntax that expands into full HTML. It’s a fast way to generate repetitive structures like tables, links, or nested divs.

For example, type this (don’t copy/paste):

div>div>table>tr*3>td>a

Then hit tab and it expands to:

HTML
<div>
    <div>
        <table>
            <tr>
                <td><a href=""></a></td>
            </tr>
            <tr>
                <td><a href=""></a></td>
            </tr>
            <tr>
                <td><a href=""></a></td>
            </tr>
        </table>
    </div>
</div>

You can learn more about abbreviations in the official Emmet documentation.

Specify child tags with >

HTML
table>tr>td

Becomes…

HTML
<table>
  <tr>
    <td></td>
  </tr>
</table>

Specify sibling tags with +

HTML
a+a+a

Becomes…

HTML
<a href=""></a>
<a href=""></a>
<a href=""></a>

Multiply tags with *

HTML
table>tr*3>td*2

Becomes…

HTML
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Add IDs with #

HTML
a#my-link

Becomes…

HTML
<a href="" id="my-link"></a>

Add classes with .

HTML
a.text-blue

Becomes…

HTML
<a href="" class="text-blue"></a>

Add IDs and classes together

HTML
a#my-link.text-blue

Becomes…

HTML
<a href="" id="my-link" class="text-blue"></a>
Updated September 1, 2026