> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alumio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Render a template

> Use a template with expressions and filters to render output based on the supplied data.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Use a template with expressions and filters to render output based on the supplied data. You write a template using the Twig templating language, feed it the values you want to use, and the transformer renders it into a single piece of text that is placed back into your data. This is handy whenever you need to build a formatted string, such as an order confirmation message, an email body, a CSV row, or a small block of HTML or XML.

The template can pull in values, loop over lists with `for`, make decisions with `if`, and reshape values with a set of built-in filters: `abs`, `batch`, `capitalize`, `default`, `escape` (and its short name `e`), `first`, `format`, `join`, `keys`, `last`, `length`, `lower`, `nl2br`, `number_format`, `replace`, `reverse`, `round`, `striptags`, `title`, `trim`, `upper`, and `url_encode`. For safety the template can only use these filters and the `if` and `for` tags.

This documentation describes: [Schema](/schemas/transformer/template-transformer)

## Fields

<FormField property="template" label="Template" required>
  The template to render, written in Twig. You insert values with `{{ ... }}` and add logic such as loops and conditions with `{% ... %}`. Refer to your data through the variables you define below, for example `{{ customer.firstName }}`, or loop with `{% for item in order.items %}...{% endfor %}`. The field gives you a code editor with Twig highlighting.
</FormField>

<FormField property="variables" label="Variables" required>
  The named values that become available inside the template. Each row has a key (the name you use in the template) and a value (where the data comes from). By default there is one variable named `data` set to `&{@}`, which makes the entire output of the previous step available as `data`. You can add more rows to expose individual values under shorter names. See [Placeholders](/references/placeholders) for how to reference your data in the value.
</FormField>

<FormField property="destination" label="Destination" required>
  Where the rendered result is stored in your data, written as a dot-notated path such as `order.confirmationMessage`. The transformer writes the rendered text to this location.
</FormField>

<FormField property="mappers" label="Mappers" diType="mapper">
  One or more mappers applied to the rendered text before it is stored, for example to clean up or restructure the result. Leave this empty to store the rendered text as-is.
</FormField>

## Sample data

| Field       | Value                                                                                                                |
| ----------- | -------------------------------------------------------------------------------------------------------------------- |
| Template    | `Dear {{ customer.firstName }} {{ customer.lastName }}, your order total is {{ order.total }} {{ order.currency }}.` |
| Variables   | `customer` = `&{customer}`, `order` = `&{order}`                                                                     |
| Destination | `order.confirmationMessage`                                                                                          |

Input:

```json theme={null}
{
    "customer": { "firstName": "Maria", "lastName": "Janssen" },
    "order": { "currency": "EUR", "total": 149.5 }
}
```

Output:

```json theme={null}
{
    "customer": { "firstName": "Maria", "lastName": "Janssen" },
    "order": {
        "currency": "EUR",
        "total": 149.5,
        "confirmationMessage": "Dear Maria Janssen, your order total is 149.5 EUR."
    }
}
```

```json Configuration theme={null}
{
  "prototype": "template-transformer",
  "parameters": {
    "template": "Dear {{ customer.firstName }} {{ customer.lastName }}, your order total is {{ order.total }} {{ order.currency }}.",
    "variables": [
      { "key": "customer", "value": "&{customer}" },
      { "key": "order", "value": "&{order}" }
    ],
    "destination": "order.confirmationMessage"
  }
}
```