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>
Previous ArticleNext Article