Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
One common thing you want to do is bind the value of an input element to a data value.
Say you have an input field where people can write their name into. You can bind its value to the name variable defined in x-data:
<div x-data="{ name: '' }">
<p>Your name:</p>
<input x-model="name" />
<hr>
<p>Your name is
<span x-text="name"></span>
</p>
</div>
Lessons in this unit:
| 0: | Introduction |
| 1: | Installing Alpine |
| 2: | The basics of Alpine |
| 3: | Events |
| 4: | Defining data |
| 5: | Looping |
| 6: | ▶︎ Binding user input to variables |
| 7: | Watching variables change |
| 8: | Stores |