Template Syntax

Learn about the template syntax for Parcel components

Creating variables

Inside a fieldset add an input for each variable you want to create. Each input requires a type, which is used for validating the content, and a name, to identify the variable.

Names can only contain, lowercase letters, numbers or hyphens. The name must not start with a number, and when using a hyphenated-name you need to camelCase the variable when you use it ${hyphenatedName}.

<fieldset>
<input type="url" name="link">
<input type="url" name="image">
<input type="text" name="alt-text">
</fieldset>

Setting values

When using a component in your email you can set values for these variables that will be passed to the component by using attributes on the component element.

<my-first-component link="https://parcel.io" image="https://parcel.io/my-image.png" alt-text="parcel.io website"/>

Setting attributes

Add set: in front of the attribute to make it a computed attribute, and add the name of the variable to insert it directly.

<component>
<a set:href="link">
<img set:src="image" set:alt="altText">
</a>
</component>

the output is:

<a href="https://parcel.io">
<img src="https://parcel.io/my-image.png" alt="parcel.io website">
</a>

Using JavaScript expressions

You can use basic Javascript expressions within components.

Math Evaluation

<component>
<div>${4*50}</div>
</component>

Use this component in an email:

<!-- my-email -->
<html>
<body>
A simple email
<my-first-component>
</body>
</html>

the output is:

<html>
<body>
A simple email
<div>
200
</div>
</body>
</html>

String Manipulations

<component>
<div>${'some text'.toUpperCase()}</div>
</component>

the output is:

<html>
<head></head>
<body>
A simple email
<div>
SOME TEXT
</div>
</body>
</html>

JSON Stringify

<component>
<div>
${JSON.stringify({
"firstName":"Adam",
"lastName": "Bluebeard"})}
</div>
</component>

the output is:

<html>
<head></head>
<body>
<div>
{"firstName":"Adam","lastName":"Bluebeard"}
</div></body>
</html>

Debugging data

A great way of getting a better understanding of your data it render it on the page using <pre>.

<component>
<pre wrap>
${JSON.stringify(data, null,2)}
</pre>
</component>