declarative , no bundler needed, good for Google App Script
v3 released 2021-06
Alpine.js
alpinejs/alpine: A rugged, minimal framework for composing JavaScript behavior in your markup.
alpinejs/awesome-alpine: 🚀A curated list of awesome resources related to Alpine.
Alpine.js Playground - A set of ready to use Alpine.js examples with TailwindCSS
Alpine Toolbox - Resources and Examples for Alpine.js
Alpine Day 2021: Caleb Porzio - The Future Of Alpine - YouTube
Alpine.js · Code with Hugo
Alpine JS Tutorial: Learn Alpine JS in this interactive course
Let's Learn Alpinejs with Practical Projects - YouTube
<!-- `defer` is crucial -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- version lock -->
<script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>x-data attribute needed to declare an Alpine JS component
Self-closing tag not supported (<div />), https://github.com/alpinejs/alpine/discussions/916#discussioncomment-147729
x-bind:attribute="expression" :attribute="expression"
x-on:eventName="expression" @eventName="expression"Introducing Alpine.js: A Tiny JavaScript Framework — Smashing Magazine
Alpine.js Brings JavaScript Interactivity without Complexity to HTML – The New Stack
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/AJAX examples · Code with Hugo
Starter Kit
yhaefliger/YATAS: Yet Another Tailwind Alpine Starter 11ty
stefanfrede/11st-starter-kit: 11ty, powered by Vite with Tailwind CSS and Alpine.js.
Getting started with Alpine.js and TypeScript - DEV Community Bonus round: Tailwindcss
AlpineJSwithViteJS.md
supertorpe/phaser3-dom-alpinejs: Phaser3 reactive DOM through Alpine.js
Component
markmead/alpinejs-component: Reusable HTML components powered by Alpine JS reactivity 🛸
javascript - Reusable Alpine.js components? - Stack Overflow
Prebuilt Tailwind Components | Kutty
vimeshjs/vimesh-ui: Vimesh UI is an ultra lightweight library to build UI components for Alpine.js
vimeshjs/vimesh-headless: Alpine.js implementation of Tailwind Headless UI
Lightweight Form Validation with Alpine.js and Iodine.js | CSS-Tricks
Tabs - JS - Alpine Inline
State
Persist — Alpine.js localStorage
ryangjchandler/spruce: A lightweight state management layer for Alpine.js. 🌲 for v2
mattkingshott/iodine: A micro JavaScript validation library.
Lightweight Form Validation with Alpine.js and Iodine.js | CSS-Tricks - CSS-Tricks
Ecosystem
Extending — Alpine.js
rehhouari/alpine-typescript-plugin-template: A simple TypeScript template for Alpine.js plugins
alpinejs javascript · GitHub Topics
alpinejs typescript · GitHub Topics
marcreichel (marcreichel) / Repositories
imacrayon/alpine-ajax: The missing Alpine.js attributes for interacting with your server.
hankhank10/alpine-fetch: Straightforward interactive HTTP requests from within your Alpine.JS markup
rehhouari/alpinejs-i18n: Easy i18n (Internationalization) for Alpine.js!
alpine-collective/toolkit: A set of directives and magic properties for Alpine.js
markmead/alpinejs-tash: Use a more familiar syntax when rendering Alpine JS {variables} 🚀
Pinecone Router
Pinecone Router | The exendable client-side router for Alpine.js
pinecone-router/router: The extendable client-side router for Alpine.js v3
rehhouari/pinecone-example
pinecone-router/middleware-views: Views rendering middleware for Pinecone Router
rehhouari/pinecone-example-views: Demo/Example for Pinecone Router's Views middleware
Tips and Tricks
Multiple Alpinejs file causes error · Discussion #2894 · alpinejs/alpine
Alpine.prefix("x-dd-"); //components will use x-dd-data="..."