About Alpine.js
Alpine.js is a small JavaScript library for adding behaviour to HTML. You write directives such as x-data and x-show right in your markup, so you can add interactivity without building a separate app.
What it does
An element with x-data becomes a component with its own state. Other attributes bind text, classes, events and visibility to that state. Alpine watches the state and updates the page when it changes. It is meant for the parts of a page that need a little behaviour, such as menus, tabs, modals and small forms.
Key features
- Component state declared with x-data
- Two-way form binding with x-model
- Show, hide and transition elements
- Loops and conditionals in the template
Who it's for
Developers and designers who work with server-rendered pages and want light interactivity without a build step. It works well alongside Laravel, Rails, Django or static sites where most of the page is plain HTML.
Pricing and good to know
Alpine is open source under the MIT licence and free to use. You can load it with a single script tag from a CDN. It is not designed for large single-page apps with complex routing, so use a full framework for those.
Highlights
- Component state declared with x-data
- Two-way binding for form inputs with x-model
- Show, hide and transition elements
- Loops and conditionals in markup
