Snippets

Use snippets to quickly insert repeated code such as containers, columns, and buttons across all of your workspaces.

Creating a Snippet

Navigate to the Snippets section of the Sidebar and click "+" to the right of the title. Give your snippet a descriptive name and a trigger, which you can type and tab in an email to insert the snippet. Then add your content.

Trigger names can contain any letter or number, as well as a select list of symbols (@,-,!).

You can easily copy the trigger by right clicking on the snippet name in the list.

Using a snippet

To use a snippet, open an email you want to edit. Wherever you want your snippet to go, start typing the snippet trigger, and press Tab to autocomplete and insert the snippet. You can also navigate the autocomplete menu with the arrow keys and/or cursor.

Silent video of the entire Parcel editor. The user chooses the Welcome email from their files on the left and types the trigger name in the HTML in the middle of the screen. After they press tab, the snippet replaces the trigger name and the button renders in the email preview on the right.

Snippets are a one time replace that swap the trigger for the snippet. If you later go back and edit the snippet in the Snippets panel, the older version of the snippet in the code editor will remain unchanged.

Tabstops

Tabstops are targets for your cursor once the snippet is used. Use $# (ex: $1, $2, $3) anywhere you'd want to add additional code in the snippet. For example, the snippet:

<table>
  <tr>
    <td>$1</td>
    <td>$2</td>
    <td>$3</td>
  </tr>
</table>

when used, will jump your cursor to the position $1. You can enter whatever should be there and then hit tab to move to the next tab stop.

Silent video of the code editor. The user types the trigger "tabstop" and hits the tab key to insert the snippet. The cursor is jumped to the first position, where the user types "thing one". The user hits tab again and the cursor moves to the second position, where the user types "thing 2". The user hits tab once again and the cursor moves to the final position, where the user types "three"

If you want multiple tab stops to have the same content, you can use the same number, and you'll get a cursor on each one.

<table>
  <tr>
    <td>$1</td>
    <td>$1</td>
    <td>$1</td>
    <td>$1</td>
    <td>$1</td>
  </tr>
</table>

Silent video of the code editor. The user types the trigger "tabstop" and hits the tab key to insert the snippet. Multiple cursors appear, one at each position. The user types the same message on each line concurrently.

Tabstops don't have to be numbered sequentially in the code - just sequentially in the order you want to use them. For example, the following is valid:

<table>
  <tr>
    <td>$3</td>
    <td>$2</td>
    <td>$1</td>
  </tr>
</table>

Placeholders

Tabstops can also include placeholder values, which will be auto filled when you get to that tabstop. The placeholder value will be selected so it can be easily changed. You can nest placeholder values too.

<table>
  <tr>
    <td>${1:defaultValue}</td>
    <td>${2:Parcel is really cool}</td>
    <td>${3:I like ${4:email}}</td>
  </tr>
</table>

Silent video of the code editor. The user types the trigger "tabstop" and hits the tab key to insert the snippet. The snippet content includes the placeholder text, with the first string highlighted. The user types a new message in the first position and then hits Tab to go to the second position. The content in the second position becomes highlighted, and the user replaces it with a different message. The user hits tab to jump the cursor to the third position, and then again to the fourth, which is then edited.

Choices

Placeholders can have a list of items as potential values. Choices must be a comma separated list with a pipe (|) character on each side. For example:

<table>
  <tr>
    <td>${1|firstChoice,secondChoice,thirdChoice|}</td>
    <td>${2|apple, banana, orange|}</td>
    <td>${3|pineapple smoothies are tasty, strawberry shakes are better |}</td>
  </tr>
</table>

Silent video of the code editor. The user types the trigger "tabstop" and hits the tab key to insert the snippet. The snippet content includes the placeholder text, with the first string highlighted. The user is offered an inline menu with the different options for the placeholder. The user selects an option via arrow keys, and hits the Enter key to select it. The user tabs to the next two placeholders and repeats the same selection with those placeholder options.

Sharing a snippet

By default, the snippets you make are private to you. When you navigate across workspaces, only you can see the snippets you created in the Sidebar. If you want other team members to use one, return to the Snippets panel and change the Sharing drop down on the right to "Shared". Anyone on your team can use a shared snippet across their workspaces.

Deleting a snippet

To delete a snippet, return to the Snippets page and find the snippet you wish to delete. Right click on it and click delete.

You'll be prompted with a confirmation before the snippet is deleted.

Exporting Snippets

You can export a zip of all of your snippets with the Export button in the Profile settings page

Components

If you are looking for more powerful reusable code blocks, check out Components.