> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: July 10, 2026

# Use Emmet syntax

[BetaThis feature is new and we're actively working on it.](/accounts/settings/beta-experimental-features/#beta-features)

The code editor in Design Studio supports [Emmet](https://emmet.io/), 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):

```fallback
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](https://docs.emmet.io/abbreviations/).

## 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>
```

*   *   [Specify child tags with `>`](#specify-child-tags-with-)
    *   [Specify sibling tags with `+`](#specify-sibling-tags-with-)
    *   [Multiply tags with `*`](#multiply-tags-with-)
    *   [Add IDs with `#`](#add-ids-with-)
    *   [Add classes with `.`](#add-classes-with-)
    *   [Add IDs and classes together](#add-ids-and-classes-together)

Copy page

Copy page [Download .md](/messaging/design-studio/emails/code-editor/emmet.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible