Awesome Alpine [](https://github.com/sindresorhus/awesome)
July 26, 2023 · View on GitHub
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
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