Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alpine-collective/awesome

🚀A curated list of awesome resources related to Alpine.
https://github.com/alpine-collective/awesome

List: awesome

alpine alpinejs awesome awesome-alpine dom javascript

Last synced: 3 months ago
JSON representation

🚀A curated list of awesome resources related to Alpine.

Host: GitHub
URL: https://github.com/alpine-collective/awesome
Owner: alpine-collective
Created: 2020-03-01T18:45:15.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-05-17T18:01:00.000Z (6 months ago)
Last Synced: 2024-05-22T05:14:35.155Z (6 months ago)
Topics: alpine, alpinejs, awesome, awesome-alpine, dom, javascript
Homepage: https://github.com/alpinejs/alpine
Size: 93.8 KB
Stars: 937
Watchers: 49
Forks: 50
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

ultimate-awesome - awesome - 🚀A curated list of awesome resources related to Alpine. (Other Lists / PowerShell Lists)

README

        # Awesome Alpine [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

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

A curated list of [Alpine](https://github.com/alpinejs/alpine) resources.

* [Official Resources](#official-resources)

* [Articles](#articles)

* [Podcasts](#podcasts)

* [Videos & Screencasts](#videos--screencasts)

* [Examples](#examples)

* [Extensions & Plugins](#extensions--plugins)

* [UI Frameworks](#ui-frameworks)

* [Other](#other)

To contribute, fork this repository, add your new resource and submit a PR. For more information, see [CONTRIBUTING](/CONTRIBUTING.md).

## Official Resources

* [Alpine Website](https://alpinejs.dev)

* [Alpine GitHub](https://github.com/alpinejs/alpine)

* [Alpine Twitter](https://twitter.com/Alpine_JS)

## Articles

* [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/)

* [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)

* [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/)

* [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html)

* [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/)

* [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn)

* [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)

* [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue)

* [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/)

* [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/)

* [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/)

* [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/)

* [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/)

* [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs)

* [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components)

* [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs)

* [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs)

* [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/)

## Podcasts

* [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript)

* [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132)

* [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194)

## Videos & Screencasts

* [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs)

* [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY)

* [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js)

* [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs)

* [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js)

* [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials)

* [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)

## Examples

* [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/)

* [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ)

* [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground)

* [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks)

* [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm)

* [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss)

* [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine)

* [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable)

* [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse)

* [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/)

## Extensions & Plugins

* [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense)

* [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce)

* [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools)

* [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers)

* [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils)

* [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router)

* [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash)

* [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard)

* [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch)

* [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router)

* [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize)

* [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago)

* [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate)

* [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter)

* [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax)

* [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska)

## UI Frameworks

* [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui)

## Other

* [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter)

* [Alpine.js Discord Community](https://discord.gg/CGmj5nq)

* [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org)

* [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org)