learn-alpine.js

 Learn how to use **`Alpine.js`** to build **declarative + responsive UI _fast_**!  [](http://codecov.io/github/dwyl/learn-alpine.js?branch=main) [](https://hex.pm/packages/elixir_auth_google) [](https://github.com/dwyl/learn-alpine.js/issues) [](https://hits.dwyl.com/dwyl/learn-alpinejs)

Why? 🤷

We heard a lot about Alpine.js online and wanted to know what the fuss was about.
We weren’t disappointed. You won’t be either. It’s a compact, functional and performant library.

What? 💡

Alpine.js lets you add progressive enhancements to any HTML page with minimal in-line declarative code. This makes it easy to add attractive/useful UI elements such as toggle, fade-in/out, transitions and other effects.

If you’ve been building websites since the jQuery days … ⏳
We consider Alpine.js a good declarative “successor” to jQuery.

Note: Alpine.js is not quite as elegant as svelte.
However svelte wants to “own” the DOM which means it doesn’t play nicely with LiveView …
So this is our best option for now.

Who? 👤

• Anyone building a Static website that needs good UI enhancements.
• People in the @dwyl team that want to understand how we’re building our Web App(s).

How? 💻

Clone:

git clone git@github.com:dwyl/learn-alpine.js.git && cd learn-alpine.js

Install ⬇️

We are using Phoenix to render the Alpine.js examples.

Run the following commands in your terminal:

mix deps.get
mix phx.server

Don’t hesitate to open issues if you have any questions linked to Phoenix!

Visit localhost:4000 where you can see a list of examples we have created, for example:

e.g: https://dwyl.github.io/learn-alpine.js

Then you can follow the tutorial: https://alpinejs.dev/start-here

Or if you have a decent internet connection this video is a good intro: https://youtu.be/r5iWCtfltso

Stopwatch! ⏱️

Once you have a basic understanding of how Alpine.js’s directives work. checkout our Stopwatch example: https://dwyl.github.io/learn-alpine.js/stopwatch.html

Code: stopwatch.html

Drag and drop

A Phoenix + Alpine.js application using drag and drop to sort items in table.

See drag-and-drop.md

This site is open source. Improve this page.