Template Syntax

Learn about the template syntax for Parcel components

Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest 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>
Previous ArticleNext Article