x-text & x-html

x-text

x-text sets the text content of an element to the result of a given expression.

Here's a basic example of using x-text to display a user's username:

<div x-data="{ username: 'calebporzio' }">
    Username: <strong x-text="username"></strong>
</div>

Now the <strong> tag's inner text content will be set to "calebporzio".

x-html

x-html sets the "innerHTML" property of an element to the result of a given expression.

WARNING

Use this only on trusted content and never on user-provided content. Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.

Here's a basic example of using x-html to display a user's username:

<div x-data="{ username: '<strong>calebporzio</strong>' }">
    Username: <span x-html="username"></span>
</div>

Now the <span> tag's inner HTML will be set to "calebporzio".