Alpine.js Documentation - Directives

Alpine directives are attributes that you can add to HTML elements to give them special behavior.

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' }">


nUsername: <strong x-text="username"></strong>


n</div>

Username:

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

Code highlighting provided by Torchlight