x-html - Render HTML in Alpine.js

From the Alpine.js cheat sheet · Directives - Data Display · verified Jul 2026

Set HTML content of an element

html

<div x-data="{
  content: '<strong>Bold text</strong>'
}">
  <div x-html="content"></div>
  <!-- Output: Bold text (rendered as HTML) -->
</div>

⚠️ Only use x-html with trusted content - XSS risk

💡 Prefer x-text unless you specifically need HTML

✅ Useful for rendering rich content from CMS

🔍 Sets innerHTML, so all HTML tags are parsed

x-htmlhtmlrendersecurity

More Alpine.js tasks