# 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

- <a href="https://docs.dyspatch.io/dml/#dys-inputs">dys-inputs</a> let you define variables and placeholders within the block code
  - Allow you to define placeholder data within the block itself
  - Only for testing, will not be included in rendered emails
  - Require a key (your variable name) and placeholder value
  - Can be used as an alternative to the data tab or customer profiles

- Data types available are:
  - `<dys-string>` for text
  - `<dys-bool>` for boolean values
  - `<dys-number>` for numbers
  - `<dys-array>` for arrays and lists of items
  - `<dys-object>` for objects

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

```
<dys-block>
  <dys-inputs>
    <dys-string key="name" placeholder="there" />
    <dys-object key="customer">
    	<dys-string key="name" placeholder="you" />
    </dys-object>
  </dys-inputs>

  <dys-comment>
  	This block is currently using the placeholders from the dys-inputs.
    To try using sample data, add this to the data tab:
		{
    		  "name": "Bob",
    		  "customer": {
        	    "name": "Jane"
    		  }
		}
  </dys-comment>

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

Using `<dys-inputs>` placeholder data:
<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/variables-dys-inputs.png" alt="Variables using dys-inputs data">

Using sample data tab:
<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">

View in <a href="https://dml-playground.dyspatch.io/ram0jKkjtkcGFUglGirYrZhj2UYGQSGt26R">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/ram0jKkjtkcGFUglGirYrZhj2UYGQSGt26R" sandbox="allow-scripts allow-popups allow-same-origin" loading="lazy" width="1000px" height="500px"></iframe>

</div>
</div>


## 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>