I tinkered with Alpine.js after listening to Full Stack Radio #132 where Caleb Porzio (the create of Alpine.js) talked through his rugged and minimal framework.

I didn’t have an immediate need at the time, but more recently I needed a front end framework that could be easily and gradually sprinkled into a Rails app. I was hungry for Elm, given that it’s touted as a complete front end kit, but unfortunately some of the integrations with existing Javascript behaviour were going to be super challenging.

After researching React/Preact integration into Rails, they seemed like overkill for gradually introducing new behaviour, and that’s when I came back to Alpine.js. On the surface, the 13 directives and few properties don’t seem like they’ll translate into a useful frontend framework….but you’d be wrong!

The key selling point of Alpine.js - for me - is the ability to start bringing behaviours directly into the markup of a server rendered page. Alpine will just pickup the markup via the 13 x- prefixed directives and do its thing.

There is still a learning curve, but nothing compared to the likes of React/Vue. If you’re a fan of Tailwind, then there’s an added bonus as a lot of the new Tailwind components (see Tailwind UI) are being refactored from Vue into Alpine.

Examples are still a little harder to come by, so I’ve put together a basic TODO prototype as a full working example of Alpine.js and Tailwind.

There’s a demo here or you can find the Gist here - please feel free to fork and refactor for the benefit of others!