Template Literals

The html tag is safe by default: text is escaped, nested templates compose, and raw HTML stays explicit.

Safe interpolation

html
<p>&lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt;</p>
tsx
html`<p>${'<script>alert("x")</script>'}</p>`

Composition

html
<ul><li>Escaped text</li><li>Nested templates</li><li>Attribute sugar</li></ul>
tsx
const list = ['Escaped text', 'Nested templates']
html`<ul>${list.map(item => html`<li>${item}</li>`)}</ul>`

Attributes and trusted HTML

html
<button disabled class="button button--variant-outline button--theme-default button--size-md"><strong>Save</strong></button>
tsx
html`<button attrs=${{ disabled: true, class: ['button', 'button--variant-outline', 'button--theme-default', 'button--size-md'] }}>
  ${raw('<strong>Save</strong>')}
</button>`