├── CONTRIBUTING.md └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please ensure all pull requests made to this repository adhere to the following guidelines: 4 | 5 | * Search through existing resources to make sure yours is not a duplicate. 6 | * Make each resource change in an individual pull request. 7 | * Use the following format for your resource: `* [title - author](link)`. 8 | * Place the resource under the appropriate category. 9 | * New categories, or modifications to existing categories, are welcome. 10 | * Check your spelling and grammar. 11 | * Please make sure there is no trailing whitespace. 12 | * The pull request should contain a brief description of the resource being added and why it would be useful. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Alpine [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | 3 | > A rugged, minimal framework for composing JavaScript behavior in your markup. 4 | 5 | A curated list of [Alpine](https://github.com/alpinejs/alpine) resources. 6 | 7 | 8 | 9 | * [Official Resources](#official-resources) 10 | * [Articles](#articles) 11 | * [Podcasts](#podcasts) 12 | * [Videos & Screencasts](#videos--screencasts) 13 | * [Examples](#examples) 14 | * [Extensions & Plugins](#extensions--plugins) 15 | * [UI Frameworks](#ui-frameworks) 16 | * [Other](#other) 17 | 18 | 19 | 20 | To contribute, fork this repository, add your new resource and submit a PR. For more information, see [CONTRIBUTING](/CONTRIBUTING.md). 21 | 22 | ## Official Resources 23 | 24 | * [Alpine Website](https://alpinejs.dev) 25 | * [Alpine GitHub](https://github.com/alpinejs/alpine) 26 | * [Alpine Twitter](https://twitter.com/Alpine_JS) 27 | 28 | ## Articles 29 | 30 | * [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/) 31 | * [Add Behavior To HTML Using Alpine.js – A Todo App](https://lukasznojek.com/blog/2020/02/add-behavior-to-html-using-alpine-js-a-todo-app/?utm_content=bufferbb4ff&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 32 | * [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/) 33 | * [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html) 34 | * [Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us](https://www.bram.us/2020/01/14/alpine-js-a-rugged-minimal-framework-for-composing-javascript-behavior-in-your-markup/) 35 | * [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn) 36 | * [A comparison of a simple app in Vue.js and Alpine.js - Liam Hall](https://medium.com/@wearethreebears/a-comparison-of-a-simple-app-in-vue-js-and-alpine-js-2a8c57f8b0e3) 37 | * [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue) 38 | * [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/) 39 | * [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/) 40 | * [Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks](https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/) 41 | * [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/) 42 | * [Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-watch-url/) 43 | * [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs) 44 | * [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components) 45 | * [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs) 46 | * [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs) 47 | * [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/) 48 | 49 | ## Podcasts 50 | 51 | * [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript) 52 | * [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132) 53 | * [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194) 54 | 55 | ## Videos & Screencasts 56 | 57 | * [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs) 58 | * [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY) 59 | * [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js) 60 | * [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs) 61 | * [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js) 62 | * [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials) 63 | * [Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis](https://egghead.io/playlists/sprinkle-declarative-reactive-behaviour-on-your-html-with-alpine-js-5f8b) 64 | 65 | ## Examples 66 | 67 | * [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/) 68 | * [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ) 69 | * [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground) 70 | * [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks) 71 | * [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm) 72 | * [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss) 73 | * [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine) 74 | * [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable) 75 | * [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse) 76 | * [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/) 77 | 78 | ## Extensions & Plugins 79 | 80 | * [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense) 81 | * [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce) 82 | * [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools) 83 | * [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers) 84 | * [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils) 85 | * [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router) 86 | * [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash) 87 | * [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard) 88 | * [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch) 89 | * [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router) 90 | * [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize) 91 | * [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago) 92 | * [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate) 93 | * [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter) 94 | * [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax) 95 | * [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska) 96 | 97 | ## UI Frameworks 98 | 99 | * [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui) 100 | 101 | ## Other 102 | 103 | * [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter) 104 | * [Alpine.js Discord Community](https://discord.gg/CGmj5nq) 105 | * [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org) 106 | * [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org) 107 | --------------------------------------------------------------------------------