# Part 3: Templating Logic


Discover how to add dynamic behavior to emails using variables, conditionals, and loops in DML. This enables personalized, data-driven email content that adapts at send time or during export.

# DML Templating

Use DML to define your templating logic.  When your email is exported, Dyspatch will translate your code to your ESP’s templating language.  This makes your code portable — if you change your ESP, Dyspatch will handle the necessary code changes.  Test out your code as you build by inputting preview data right inside your block editor:

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/data-tab.png" alt="Data tab in the Dyspatch block editor">

## Variables

- Syntax — `@{name}`, or `@{object.name}` for a nested variable
  - Variable names and structures should match the data you will pass in when sending an email

Test your variables by adding matching data to the **Data** tab in the block and email editors, or by using [Customer Profiles](/emails/using_customer_profiles) to preview against real-world data scenarios your email builders can switch through and toggle on and off.

<!-- Mobile View -->
<div class="hide-when-iframe">

For example, this DML:

```
<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        Hey @{name}!
      </dys-text>
      <dys-text>
        Hi, @{customer.name}!
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
```

paired with this Data tab entry:

```json
{
  "name": "Bob",
  "customer": {
    "name": "Jane"
  }
}
```

renders as:
<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/variables-sample-data.png" alt="When sample data is entered, variables will use that instead">

</div>
<!-- End Mobile View -->

<!-- Desktop View -->
<div class="hide-on-small-screens">

<div class="allow-overflow img-border" width="1000px">

<iframe src="https://dml-playground.dyspatch.io/gOuMXOxmoBLCLRb3rQk4aS1jE68GEmGt8aa" sandbox="allow-scripts allow-popups allow-same-origin" loading="lazy" width="1000px" height="500px"></iframe>

</div>
</div>
<!-- End Desktop View -->

<div class="highlight tip"><a href="https://docs.dyspatch.io/dml/#dys-inputs">dys-inputs</a> let you use data-type tags like <code>dys-string</code> and <code>dys-bool</code> to set persistent inline preview values at the block level. These persist in previews even when other preview data are turned off. In most cases it is preferable to use the Data tab or <a href="/emails/using_customer_profiles">Customer Profiles</a> to preview against real-world data scenarios, which better reflect the variety of data payloads your emails will handle. In previews, Data tab and Customer Profile values take precedence over dys-inputs placeholders when both are present.</div>

View DML Playground Examples:
- <a href="https://dml-playground.dyspatch.io/gOuMXOxmoBLCLRb3rQk4aS1jE68GEmGt8aa">Data tab variables example</a>
- <a href="https://dml-playground.dyspatch.io/ram0jKkjtkcGFUglGirYrZhj2UYGQSGt26R">Dys-inputs variables example</a> — try adding the Data tab entry above to see it take precedence.

## Conditionals — <a href="https://docs.dyspatch.io/dml/#dys-if">dys-if</a>

- Define your conditional statement using dys-if with the attribute `cond="condition to evaluate"`
- If your condition is met, the code within `<dys-if> </dys-if>` will be rendered
- A full list of the supported comparison operators, modifiers, and logical operators is available in the <a href="https://docs.dyspatch.io/dml/#dys-if">DML Documentation</a>

<div class="hide-when-iframe">

```
Block:

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        Hello <dys-if cond="first_name != ''">@{first_name}</dys-if>!
      </dys-text>
      <dys-text>
        <dys-if cond="recent_purchase_amount > 50 && membership == 'premium'">
          Thanks for being an active premium member!
        </dys-if>
        <dys-if cond="'kite' in purchases">
          Are you enjoying your new kite?
        </dys-if>
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>


Data:
{
  "first_name": "Hina",
  "membership": "premium",
  "recent_purchase_amount": 100,
  "purchases": ["string", "windbreaker", "kite"]
}
```

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/dys-if.png" alt="dys-if conditionals evaluated based on the sample data">

View in <a href="https://dml-playground.dyspatch.io/6jxdRkk7kEyL6JVWXheS9WIRDBPjRQPLlwz">DML Playground</a>

</div>

<div class="hide-on-small-screens">

<div class="allow-overflow img-border" width="1000px">

<iframe src="https://dml-playground.dyspatch.io/6jxdRkk7kEyL6JVWXheS9WIRDBPjRQPLlwz" sandbox="allow-scripts allow-popups allow-same-origin" loading="lazy" width="1000px" height="500px"></iframe>

</div>
</div>


## Loops — <a href="https://docs.dyspatch.io/dml/#dys-for">dys-for</a>

- `<dys-for each="item in items">`
  - Iterates through an array within your data
- `<dys-for range="1 to 3">`
  - Performs loop for a set range of integers

<div class="hide-when-iframe">

```
Block:
<dys-block>
  <dys-row>
    <dys-column>
      <dys-table padding-left='50px' padding-right='50px'>
        <tr>
          <th style='border-bottom:1px solid #ecedee;text-align:left;'
            editable='th1'>
            Item
          </th>
          <th style='border-bottom:1px solid #ecedee;text-align:right;'>
            Price
          </th>
        </tr>
        <dys-for each="item in line_items">
          <tr>
            <td style='text-align:left'>
              @{item.name}
            </td>
            <td style='text-align:right;'>
              @{item.price}
            </td>
          </tr>
        </dys-for>
      </dys-table>
    </dys-column>
  </dys-row>
</dys-block>

Data:
{
 "line_items":[
   {"name": "Apples",
    "price": "$1.00/lb"
   },
   {"name": "Oranges",
    "price": "$1.22/lb"
   },
   {"name": "Bananas",
    "price": "$1.33/lb"
   },
   {"name": "Grapefruit",
    "price": "$0.99/lb"
   }
 ]
}
```

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/dys-table-dynamic.png" alt="dys-table populated by sample data using dys-for">

View in <a href="https://dml-playground.dyspatch.io/6ipm5Ee89XD01BCGzEWWTisYwenjuwcpfn4">DML Playground</a>

</div>

<div class="hide-on-small-screens">

<div class="allow-overflow img-border" width="1000px">

<iframe src="https://dml-playground.dyspatch.io/6ipm5Ee89XD01BCGzEWWTisYwenjuwcpfn4" sandbox="allow-scripts allow-popups allow-same-origin" loading="lazy" width="1000px" height="500px"></iframe>

</div>
</div>

<!--alex ignore special-->
## Special Case — <a href="https://docs.dyspatch.io/dml/#dys-export">dys-export</a> & <a href="https://docs.dyspatch.io/dml/#dys-raw">dys-raw</a>

On export, Dyspatch will translate your email into the language used by your ESP. If you’re exporting to multiple ESPs, which may have different logic capabilities, you can define DML that should only be rendered when exporting to certain languages using `<dys-export>`.
- The full list of dys-export target languages is available in the <a href="https://docs.dyspatch.io/dml/#dys-export">DML Documentation</a>.
- Check out our <a href="https://docs.dyspatch.io/exports">Knowledge Base</a> for more detailed information on exporting to different ESPs

If you have a use case we don’t yet support, you can use `<dys-raw>` to take direct control over what gets passed on to your ESP.  Content wrapped in `<dys-raw>` tags is ignored by Dyspatch and will be passed on to your ESP as-is.

<div class="hide-when-iframe">

```
<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        This content will show for all export languages.
      </dys-text>
      <dys-export targets='handlebars, ampscript'>
        <dys-text>
          This content will only show if I am exporting to Handlebars or AMPscript.
        </dys-text>
      </dys-export>
      <dys-raw>
        Content here goes directly to the email and you won't see content here
        in Dyspatch.
        Use this to insert templating logic if required.
      </dys-raw>
    </dys-column>
  </dys-row>
</dys-block>
```

View in <a href="https://dml-playground.dyspatch.io/oJRtJoqJJFIJNPwGnjqzMDKmPzugz8wg2x7">DML Playground</a>

</div>

<div class="hide-on-small-screens">

<div class="allow-overflow img-border" width="1000px">

<iframe src="https://dml-playground.dyspatch.io/oJRtJoqJJFIJNPwGnjqzMDKmPzugz8wg2x7" sandbox="allow-scripts allow-popups allow-same-origin" loading="lazy" width="1000px" height="500px"></iframe>

</div>
</div>
