Snippets

Quickly insert reusable snippets and code even faster.

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.

Screenshot showing how to copy the trigger
Screenshot showing how to copy the trigger

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

Screen recording showing how to create and use a snippet

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.

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.

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

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.

Screenshot showing Snippet sharing settings
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.

Screenshot showing how to delete a snippet
Screenshot showing how to delete a snippet
You'll be prompted with a confirmation before the snippet is deleted.

Screenshot showing Snippet delete confirmation message
Screenshot showing Snippet delete confirmation message

Components

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