Snippets

Use snippets to quickly insert repeated code such as containers, columns, and buttons.

Creating a Snippet

Navigate to the Snippets page via the Snippets button in the left side of the window. Give your snippet a descriptive name and a trigger. The trigger is a keyword which (if typed and tabbed) will be replaced with the entire snippet. You can easily copy the trigger by right clicking on the snippet name in the list.

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

Silent video of the entire Parcel window. The cursor navigates to and clicks on the Snippets button in the left sidebar, which brings the user to a "New Snippet" page. The left sidebar in this new page has a list of existing snippets and a search bar. The top snippet is selected. The main region of the window includes editable text fields for "Name" and "Trigger", and drop down menus for "Syntax" and Sharing". Below is a large code editor where users can compose their snippets. The user types "Blue Content Button" into the Name field and "mybutton" in the trigger field. Some HTML code is pasted into the editor field. The user returns to the Editor, and navigates through the email HTML code until reaching the desired line. The user begins to type "mybutton" on this line and then hits the tab key, which replaces "mybutton" with the HTML content written in the snippet. The Preview on the left updates to reflect the new blue button added to the email.

Using a snippet

To use a snippet, return to the workspace editor. 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 navigates through the email HTML code until reaching the desired line. The user begins to type "mybutton" on this line and then hits the tab key, which replaces "mybutton" with the HTML content written in the snippet. The Preview on the left updates to reflect the new blue button added to the email.

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

You can share snippets with your team members. Return to the Snippets panel and change the Sharing drop down on the right to "Shared". Anyone on your team will be able to use the snippet.

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.