Use Emmet syntax
BetaThis feature is new and we're actively working to improve it. UpdatedThe 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:
<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!
