Snippets

Quickly insert reusable snippets and code even faster.

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.

Silent video of the entire Parcel window. The cursor navigates to and clicks on the plus icon besides the Snippets header in the left sidebar. The user clicks on the new snippet they just created. The user enters a name "CTA" for the snippet followed by "cta-1" for the trigger name. Below that, the user pastes an anchor tag with a link to Parcel's docs. A preview renders to the right of the editor. It shows a blue button with the text "Learn more." The user then 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.
Screen recording showing how to create and use a snippet

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.

Up close image of the snippets sidebar. A snippet titled CTA has been right clicked, revealing a menu with the options "Copy Trigger" and "Delete".
Screenshot showing how to copy the trigger

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.
Screen recording showing how to use a snippet

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"
Screen recording showing how tabstops work

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.
Screen recording showing how multiple tabstops work

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.
Screen recording showing how placeholders work

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.
Screen recording showing how choices work

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.

Image of the snippets page. The snippet named "CTA" is selected. To the right of the Name and Trigger Name fields is a dropdown menu titled "Sharing" with the option "Shared" selected.
Screenshot showing Snippet sharing settings

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.

Up close image of the snippets sidebar. The first snippet has been right clicked, revealing a menu with the options "Copy Trigger" and "Delete".
Screenshot showing how to delete a snippet.

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

Up close image of the "Delete Snippet" confirmation. It reads "Are you sure you want to delete this snippet?" and has a red "Delete" and a black "Cancel" button below.
Screenshot showing Snippet delete confirmation message

Exporting Snippets

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

Image of the workspace settings page, which contains several sections. One section, titled "Export Snippets - Download a zip file containing all of your snippets", has an "Export snippets" button.
Screenshot showing the snippet export button

Components

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