Loading…

Use Emmet syntax

BetaThis feature is new and we're actively working to improve it. Updated

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:

<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!
  Contents
Is this page helpful?