x-text - Display Text in Alpine.js

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

Set text content of an element reactively

html

<div x-data="{ message: 'Hello Alpine!' }">
  <p x-text="message"></p>
  <!-- Output: Hello Alpine! -->
</div>

✅ x-text sets innerText, automatically escaping HTML

💡 Safer than x-html for user-generated content

🔍 Supports any JavaScript expression

⚡ Updates automatically when data changes

x-textdata-bindingdisplay

More Alpine.js tasks