The basics of Alpine are pretty straightforward: you define some data inside your markup using the x-data attribute, and then you can show this data to the users using the x-text attribute on a tag, like this:

<div x-data="{ name: 'Joe' }">

</div>

<div x-data="{ name: 'Joe' }">
  <p x-text="name"></p>
</div>

Using boolean state and the x-show attribute you can easily hide or show some portions of the UI:

<div x-data="{ showThis: false }">
  <p x-show="showThis">Show this</p>
</div>

If you set the showThis variable to false, nothing will be displayed:

You can use x-show="!showThis" to do the opposite:

One thing to the data is only available on child elements of the tag with the x-data attribute.

For example in this case the second p tag doesn’t have access to the showThis value, and it’s shown regardless of its value defined in the div (it’s isolated):

Lessons in this unit: