Use Emmet syntax
Design Studio New UpdatedThe Code Editor 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.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
For example, type this (don’t copy/paste):
div>div>table>tr*3>td>a
Then hit tab and it expands to:
<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 >
table>tr>td
Becomes…
<table>
<tr>
<td></td>
</tr>
</table>
Specify sibling tags with +
a+a+a
Becomes…
<a href=""></a>
<a href=""></a>
<a href=""></a>
Multiply tags with *
table>tr*3>td*2
Becomes…
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Add IDs with #
a#my-link
Becomes…
<a href="" id="my-link"></a>
Add classes with .
a.text-blue
Becomes…
<a href="" class="text-blue"></a>
Add IDs and classes together
a#my-link.text-blue
Becomes…
<a href="" id="my-link" class="text-blue"></a>
Copied to clipboard!
