Rendering lists in Alpine.js

displaying the items of an array as a list

// updated 2025-09-26 13:39

Provided we have an array encoded in JSON we can easily display its items in the form of a list with a very streamlined x-for syntax:

Note that we also use the shorthand syntax for x-bind:key (:key) so that each list item has a unique identifier!

⬅️ older (in textbook-alpinejs)
🏔️ Templating and styling with Alpine.js
newer (in textbook-alpinejs) ➡️
Using x-ref in Alpine.js 🏔️
⬅️ older (in code)
🏔️ Shorthand cheatsheet for Alpine.js
newer (in code) ➡️
Using x-ref in Alpine.js 🏔️
⬅️ older (posts)
🏔️ Shorthand cheatsheet for Alpine.js
newer (posts) ➡️
Using x-ref in Alpine.js 🏔️