Draft:Alpine.js
 | Review waiting, please be patient.
This may take a week or more, since drafts are reviewed in no specific order. There are 684 pending submissions waiting for review.
Where to get help
How to improve a draft
You can also browse Wikipedia:Featured articles and Wikipedia:Good articles to find examples of Wikipedia's best writing on topics similar to your proposed article. Improving your odds of a speedy review To improve your odds of a faster review, tag your draft with relevant WikiProject tags using the button below. This will let reviewers know a new draft has been submitted in their area of interest. For instance, if you wrote about a female astronomer, you would want to add the Biography, Astronomy, and Women scientists tags. Editor resources
Reviewer tools
|
Alpine.js is JavaScript framework for working with user interface. Alpine.js is easy-to-learn framework and him often compare with Vue.js and react, but they more harder than Alpine.js. With Alpine.js you easily handle events and work with DOM without manual updating it. First version was released in 2019.
 | |
| Name | Alpine.js |
|---|---|
| Type | JavaScript framework |
| Developer | Caleb Porzio |
| First version | 2019 |
| Latest version | March 12, 2025; v3.14.9 |
| License | MIT |
| Usage | Dynamic interaction with DOM, minimal alternative Vue.js |
Code examples
Easy counter on Alpine.js:
<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span>
</div>
Simple search input:
<div
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>