x-for - Loop & Lists in Alpine.js
From the Alpine.js cheat sheet · Directives - Control Flow · verified Jul 2026
x-for - Loop & Lists
Render lists of elements from arrays
html
<div x-data="{
items: ['Apple', 'Banana', 'Cherry']
}">
<template x-for="item in items" :key="item">
<li x-text="item"></li>
</template>
</div>✅ Must be used on <template> tag
💡 Always provide :key for optimal performance
🔍 Access index with (item, index) in items syntax
⚡ Automatically updates when array changes
x-forlooplistsiterationtemplate