How do I include dynamic content in the HTML Source editor?

When using the HTML Source editor to manually edit your HTML markup, the editor does a little work to make sure your HTML is valid and is a helpful way to ensure you don't make common mistakes and typos. However, if you want to include dynamic content within your HTML source, you'll need to make sure the editor doesn't alter your input when you save your work. 

Tip: Use HTML comments to protect your dynamic content markup from being modified by the HTML Source editor.

Example:

Let's say you'd like to use dynamic content to display your subscriber's custom fields in an HTML table. However, the HTML Source editor only allows certain HTML elements within a <table> element. If you were to include dynamic content within the HTML table, it would be moved outside of your table, resulting in something different than you were hoping for. 

In this example, you're hoping your HTML and dynamic content render a table of your subscriber's favorite things. Here's what it might look like:

The following markup would NOT work. (See solution below)

<h2>Some of your favorite things:</h2>

<table border="1" style="width: 100%;">
  <tbody>
    <tr style="border-spacing: 0px;">
      <th>Topic</th>
      <th>Choice</th>
    </tr>
    {% for key, value in subscriber.custom_field.items() %}
    <tr style="border-spacing: 0px;">
      <td>{{key}}</td>
      <td>{{ value }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

Correct Solution

In order to protect your dynamic content from modification by the HTML Editor, add your dynamic content within HTML comments.

<!-- {% for key, value in subscriber.custom_field.items() %} -->
...
<!--{% endfor %} -->

It's that simple. Here is the complete working solution:

<h2>Some of your favorite things:</h2>

<table border="1" style="width: 100%;">
  <tbody>
    <tr style="border-spacing: 0px;">
      <th>Topic</th>
      <th>Choice</th>
    </tr>
    <!-- {% for key, value in subscriber.custom_field.items() %} -->
    <tr style="border-spacing: 0px;">
      <td>{{key}}</td>
      <td>{{ value }}</td>
    </tr>
    <!--{% endfor %} -->
  </tbody>
</table>

Learn more about using dynamic content in your messages to make them personalized for each subscriber.