Alpine.js In-Depth: x-data "state" & x-text "echo"

The simplest Alpine.js application is the following HTML file. It loads Alpine.js version 2+ from the JSDelivr CDN using a script tag and has an Alpine.js component with x-data="{ msg: 'Hello Alpine.js' }" and a p element with x-text="msg".

<script 
  src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
  defer
></script>

<div x-data="{ msg: 'Hello Alpine.js' }">
  <p x-text="msg"></p>
</div>

Which displays the following in your browser:

We can further break down the Alpine.js application/component/widget (I’ll use the words interchangeably).

The x-data directive “Declares a new component scope” (per the Alpine.js README). Any HTML element with an x-data attribute will be initialised by Alpine.js as a component. The attribute’s value, in this case "{ msg: 'Hello Alpine.js' }" is evaluated as JavaScript, in this case that string will yield the following an object with a single key, msg whose value is 'Hello Alpine.js'.

That means <div x-data="{ msg: 'Hello Alpine.js' }"> will create an Alpine.js component with div as the root element with the object { msg: 'Hello Alpine.js' } as the Alpine.js state.

Alpine.js directives will only work:

• on an element with x-data since it’s the component root element
• on an element which is a child of an element that has x-data

For example: <p x-data="{ msg: 'Hello Alpine.js' }" x-text="msg"></p> will display the same as the example where x-text is on a p element inside of the div which has the x-data.

The other Alpine.js directive which is crucial to getting a quickstart is x-text. x-text is reminiscent of echo in PHP, it’s a way to interpolate JavaScript variables and expressions to the HTML document. For JavaScript developers, x-text="value" is very similar to using el.textContent = value where value is a variable.

In the case of our example, we’ve got a msg property on the Alpine.js state, which we want to show, hence we use x-text="msg".

We’ve now seen how to create a very basic read-only Alpine.js component using x-data and x-text.

You can find the examples for this post at Alpine.js Handbook Examples - 1.1 x-data & x-text

That’s it for this post, you can check out the Alpine.js tag on Code with Hugo for more in-depth Alpine.js guides.

If you’re interested in Alpine.js, Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles.

Photo by Vidar Nordli-Mathisen on Unsplash