Awesome Alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.

A curated list of Alpine resources.

• Official Resources
• Articles
• Podcasts
• Videos & Screencasts
• Examples
• Extensions & Plugins
• UI Frameworks
• Other

To contribute, fork this repository, add your new resource and submit a PR. For more information, see CONTRIBUTING.

Official Resources

• Alpine Website
• Alpine GitHub
• Alpine Twitter

Articles

• Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine
• Add Behavior To HTML Using Alpine.js – A Todo App
• Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev
• Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld
• Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us
• Starting with AlpineJS - Thomas Toledo-Pierre
• A comparison of a simple app in Vue.js and Alpine.js - Liam Hall
• AlpineJS – a lightweight alternative to Vue - Ben Furfie
• Run Alpine.js inside of React - Code with Hugo
• Build an RSS reader with Alpine.js - Codecourse
• Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks
• Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo
• Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo
• Creating Custom Magic Variables in Alpine.js - Ryan Chandler
• Writing Reusable Alpine Components - Ryan Chandler
• Authoring progressive enhanced fragments with Alpine - Nicolás Delfino
• Build a Remaining Character Count Component with Alpine.js - Ryan Chandler
• How to Use Cookies With AlpineJS - Peter Thaleikis

Podcasts

• Alpine.js is like Tailwind CSS for JavaScript
• Caleb Porzio - Just Enough JavaScript with Alpine.js
• Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby

Videos & Screencasts

• Alpine.js - a first look - Andre Madarang
• Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie
• JavaScript - Introduction to Alpine.JS - SkillBakery Studio
• Learn Alpine JS - Andre Madarang / Scrimba
• Learn Alpine.js - Codecourse
• Alpine.js Essentials - Jeffrey Way / Laracasts
• Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis

Examples

• Alpine Toolbox - Amrit Nagi
• AlpineJS meets TailwindCSS - Caneco
• Alpine.js Playground - Hugo Di Francesco
• Click Speed Test - Luciano Felix
• Dynamic Form Fields - Sanjay Ojha
• Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker
• Progressive enhancement with Alpine.js - Cart fragment example
• LittleBigTable - A flexible Alpine.js table
• NESHouse.com —— An open source implementation of ClubHouse
• AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS

Extensions & Plugins

• Alpine.js IntelliSense - Extension for Visual Studio Code
• Spruce - a lightweight state management layer
• Alpine.js DevTools - Extension for Chrome and Firefox
• Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine
• Alpine Test Utils - Utilities for testing Alpine.js components
• Pinecone Router - Client-side router for Alpine.js
• Alpine.js Tash - Render data in moustache syntax
• Alpine Wizard - Build multi-step wizards with Alpine.js
• Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup
• alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params
• Alpine Autosize - Directive for autosizing textareas
• Alpine Timeago - Display the human-readable distance between a date and now
• Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate
• Alpine Typewrite - Add a typewriter animation to any HTML element
• Alpine AJAX - Tools to build AJAX-powered components and UI
• Norska - Create interactive Three.js scenes directly with Alpine

UI Frameworks

• Vimesh UI - Agile UI framework for Alpine.js

Other

• Alpine.js Weekly - Newsletter
• Alpine.js Discord Community
• Alpine.js Matrix Community
• Alpine.js Persian Matrix Community