Some community provided Examples, Extensions, Starter Templates and Tools/Utilities to kick start your Alpine.js project
Advertisment
Alpine JS v3 is now here and so is a brand new logo and official site and docs!
Alpine JS plugin x-jsz allows you to use JSX/Moustache like syntax for templating avoding the need for x-text and x-html and creating new DOM Nodes for each text/string you need to show.
Stefan Racic
Searchable input made with Alpine.js and Pico css
RWDevelopment
Simple tab slider content made with Alpine.js and Pico css framework
Simple x-for example with local JSON data source
Alpine Toolbox
Simple x-for example with local JSON data source with basic search filtering
Simple modal with transition and Escape to close
Official Repository and getting started guide
Caleb Porzio
Simple x-for example with local JSON data source with basic pagination
Simple responsive navbar with Escape to close
A lightweight state management layer for Alpine.js
Ryan Chandler
Natively access and update data from other components or the parent component
Alpine Collective
Using Axios, fetch JSON from an external source
Run a function every n milliseconds. Optionally start and stop the timer.
Iterate over a range of values
Manually refresh a component
Detect if the current browser width is equal or greater than a given breakpoint
Scroll the page vertically to a specific position
Limit a text string to a specific number of characters or words
Track and undo state changes inside your component
A TALL (Tailwind, Alpine, Laravel and Livewire) Preset - Dan Harrin, Liam Hammett & Ryan Chandler
Dan H, Liam H and Ryan C
Accordion created using Alpine.js and Tailwind CSS
Angus Allman
Hamed Oyedele
Smooth Accordion with TailwindCSS and AlpineJS
Jan
Several accordion variations (big click area, small click area and accordion with search)
Chrysilla Mayasari
Responsive dashboard layout with slide panel
Kamona-WD
PIN code entry input with arrow navigation and pasting
Rafik El Hadi Houari
Setting up Algolia search with Alpine.js
Oh See Media
Implement a simple fetch() request to render a list of items using Alpine.js
Eddie Ebeling
Hugo's repository of all things Alpine.js
Hugo Di Francesco
Client Side Router for Alpine.js
alpinejs-devtools is a simple extension to help you debug Alpine.js apps easily.
Ahmed Mohamed Abd El Ftah
Free Intermediate course on Laracasts (Jeffery Way) - 11 episodes (2h 29m)
Jeffrey Way
Caleb Porzio speaking about Alpine.js with Adam Wathan
Caleb Porzio / Adam Wathan
Overview of Alpine.js by Andre Madarang
Andre Madarang
A free, once–weekly (every Friday) email roundup of Alpine.js news, packed with hot discussions, new features, tools, articles & tutorials.
A library to help you write tests for Alpine.js applications via Node.js using any testing library.
Overview of Alpine.js (Video is in Spanish)
Informatico sin limites
How to build a website with Alpine.js - Crash course for beginners
The Immigrant Programmers
The basics of using AlpineJS, so you can see how simple (and powerful) it is
Tony Lea
Guide to adding small transitions and effects to elements
Benjamin Bromberg
An animated slideshow displaying quotes with keyboard shortcuts
Kevin Batdorf
Axiom Template for Hugo with Alpine.js and Tailwind CSS
Jhaura Wachsman
Bar Chart with TailwindCSS and AlpineJS
Mithicher Baro
A guide to handle form data with AlpineJS
David Berri
How to build a simple, personal RSS reader using Alpine.js
Code Course
build a markdown previewer inspired by the “Build a Markdown Previewer” Freecodecamp challenge
Code Creative
How to build a Dynamic Sign Up Form With Alpine.js
Constantin
Alpine.js tutorial - learn the basics of AlpineJS and build a todo app using the framework
Alarm clock using AlpineJs
Rakesh Bhatt
Drag and drop using native browser drag and drop events
Trevor Morris
Guide to putting together a simple modal with AlpineJS and TailwindCSS
William Rodriguez
Build a custom select input from scratch, with keyboard controls, search, and Laravel Livewire compatibility.
Dan Harrin
Calendly Clone using Alpine JS and TailwindCSS)
Jeremy
Carousel created in Alpine.js and Tailwind CSS
Simeon Griggs
Carousel using Flickity
Tom Smedley
Carousel using Embla
Adam Rahwane
A simple and responsive carousel using SwiperJS and TailwindCSS
Max Eckel
Example chat bot application
Scott Windon
Alpine JS Demo Playground / Live Edit Component
Tailwind CSS color picker using AlpineJS
David Alonso
Colour Picker with TailwindCSS and AlpineJS
A combination between a checkbox list and a select box
Søren Kottal
A comparison of a simple app in Vue.js and Alpine.js
Liam Hall
An Alternative Approach to Computed Properties in Alpine.js
Custom right-click menu
Creating Custom Magic Variables in Alpine.js to make tasks more re-usable in your components
Learn how to create a simple and reusable Alpine.js component to preview uploadable images
Tiago Rodrigues
SEO and share-friendly tabs that are sure to delight
Mark Townsend
A custom select input (Tailwind CSS) with keyboard controls, search, and Laravel Livewire compatibility.
Date picker with TailwindCSS and AlpineJS
Alpine.js is like Tailwind CSS for JavaScript
Devmode.fm
Double click text to turn it into an editable field
Drag & Drop File Upload
An demo implementation of a sortable list using the drag-n-drop API
Ranjan Purbey
Dropdown Multiselect AlpineJS with TailwindCSS
Andre Prilly Kurniawan
Alternative to using a library for a searchable dropdown list
Dropdown toggle menu created using Alpine.js and Tailwind CSS
Hussain Fazaal
Adding dynamic form fields with Alpine.js
Sanjay Ojha
Click to convert text into an input field to edit the text
A starter repository showing how to build a website with the Eleventy, Tailwind CSS, and Alpine.js.
Greg Wolanski
A simple emoji picker using Alpine.js and Tailwind CSS
Tom Davies
Example page with Dropdown Menu, Page Scroll Detection, Modal Menu with Escape key function
Ben Nash
Simple faux Apple style checkbox
Paulo Nunes
Searchable favourites toolbar
Uploading files using Alpine.js - both single and multiple
Praveen Juge
Form validation with Alpine.js and Iodine
Hugh Haworth
Simple hamburger styled with Tailwind CSS
Help center / FAQ page layout
MrAhmad
Bulma Hero Template with Alpine.js and Turbolinks
Bjørn Erik Pedersen
Add comments to the existing marker or click anywhere on the image to add new markers.
Pedro Borges
Pixabay API image search created with Alpine.js and Tailwind CSS
Image upload with preview
Vince Mitchell
An image carousel that loops infinitely in either direction
Small example to do an infinite scroll on an x-for template in Alpine JS
Björn Lennartsson
Allow users to enter a number into an input box or use the range slider.
Adam Hosker
Introducing Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites
Smashing Magazine
Introduction to Alpine.JS by SkillBakery Studio
SkillBakery Studio
Invoice Generator with TailwindCSS and AlpineJS
Plugin to add support for Alpine JS in IntelliJ IDEA, AppCode, CLion, GoLand, PhpStorm, PyCharm, Rider, RubyMine, WebStorm
Chris Morrell
Dashboard with dark theme
Starter project Laravel with Tailwind CSS and Alpine.js preset.
Aris Ripandi
Interactive course on Scrimba to teach you the basics of Alpine.js in less than an hour
A paid course to get you up to speed on how to use Alpine.js
Simple Alpine.js with TailwindCSS 'lightbox-like' modal, useful for images, image grids, galleries and similar content.
Apatrid
Simple card List/Grid Layout Toggle with Tailwind CSS
Fetch Github Gists, parse the data and store it in a session to not hit the rate limit. Refresh force a refresh via button
Marcus Obst
A simple login form with show/hide password built with Tailwind CSS and Alpine JS
Francesco Mansi
Simple lyric video with local JSON data and Alpine's transition. Generate random colour for the lyrics.
Simple pin code fields
Simple modal styled with Tailwind CSS
Abdalla Arbab
HTML/CSS Multi-Range Slider (with Progress)
A tutorial on how to built Bootstrap-like tabbed content with Tailwind and Alpine.js.
David Grzyb
Responsive Navbar with Dropdown
Jan Heise
A newsletter signup form with validation built with Tailwind CSS and Alpine JS
Caleb discusses the secret Alpine.js re-write
Caleb / Daniel
Pagination component using Tailwindcss & AlpineJs
Abhishek Sarmah
A Pin/OTP auto tabbing to next field and storing the entered value
Extendable client-side router for Alpine.js
Popover and Tabs example created using Alpine.js and Tailwind CSS
Daniel Wentsch
Profile card with double-click to edit user information
How to make interactive, code-based prototypes that feel like the real deal, even if you suck at JavaScript
Jed Lehmann
A guide to integrating Alpine JS with React
Ryan's blogposts on Alpine.js
A VERTICAL scroll indicator showing page progress on the left hand side (rather than top)
Scroll up to reveal the navbar (disappears scrolling down)
Horizontally scrolling marquee. Allows for variable width child elements. Adjustable speed and space between child elements.
Elliott
An scrolling ticker, most commonly seen on breaking news
Modified existing tag component by creating a filterable tag cloud to select from. Text input is used to filter tags not add custom ones.
Vic Rubba
Truncate text and click to show more
Nav menu slideout side panel
Responsive sidebar with tailwindcss
kamona-ui
Sprinkle declarative, reactive behaviour on your HTML with Alpine JS
Simon Vrachliotis
A guide to creating a simple TODO app using Alpine.js
Łukasz Nojek
A nice example of a Frequently Asked Questions section with an accordion using Alpine.js `x-for` and styled with Tailwind CSS.
hmaesta
Sort existing HTML table by column
Loading data into a sortable table
Alex F. Wulf
Example showing sortable gallery only with AlpineJS
Jaroslav Janik
A sortable list using AlpineJS and Bootstrap
Lisa Gaudette
Star rating with labels and click again to clear.
Getting started guide and overview
Thomas Toledo-Pierre
A simple JavaScript utility for conditionally joining inline styles together
A navigation menu for mobile with toggle function for sub-level links while parent remains clickable
Thomas Gimesi
Render Swiper slides with Alpine, with data coming from Google Sheets API.
A light-weight (5.6kB), responsive and mobile first image and text gallery based on Tailwind CSS and Alpine JS.
Markus A. Wolf
Template repo for creating a TASH (Tailwind.css, Alpine.js, Spurce,.js and alpine.js magic Helpers) stack starter app.
Cas du Plessis
A table that is loaded with API data. It can be searched and has pagination
Albert Luganga
Tags multi select using Alpine.js and Tailwind CSS.
Simple tag listing (example of x-for)
A testimonial slideshow built with Tailwind CSS and Alpine JS
Toggle between Dark mode and light mode using tailwind css and Alphinejs
Ogundiji Bolade
Simple game in AlpineJS
To Do MVC application created in Alpine.js
Gergely Tarjan
To Do list with TailwindCSS and AlpineJS
Inspired by Things
Simple tooltip on hover created with Tailwind CSS
t7team
Preview your Alpine JS transitions so you can preview & tweak them easily before moving them to your application
David Hallin
A simple translation switcher
A progress/loader animation
Simple IntelliSense & Snippets for Alpine.js framework.
Adrian Wilczyński
AlpineJS WYSIWYG Editor
A guide to using Alpine.js to add interactive behavior to a Webflow site
Jarek Lipski
A multi theme, completely accessible, ready for production dashboard (using Alpine.js!)
Estevan Maito
Simple word counter using Alpine JS and Tailwind CSS
A Wordpress theme starter template for the modern web developer, including Tailwind CSS, Alpine JS and Laravel Blade
Luke Downing
Simple Youtube embed iFrame with aspect ratio and video cover
Changing class attribute based on a state variable
Carlton Gibson
Add a markdown viewer to your page via the 'x-markdown' directive
Marcel Pociot
Add tooltips to your page via the 'x-tooltip' directive (powered by Tippy.js)
A TEA-Stack starter using Tailwind CSS, Eleventy and Alpine.js.
Gerrit Halfmann
# by author
result
description
![Learn Alpine.js [$]](https://res.cloudinary.com/astrava/image/upload/f_auto/v1589835255/alpinetoolbox/guides/codecourse_lx2j5y.png)
