Archive

Hey @calebporzio, seems like the new https://t.co/tUm0XDf3Uh is using @Alpine_JS

— Amit Merchant (@amit_merchant) November 17, 2021

I spy @Alpine_JS 👀👀👀

— Caleb Porzio (@calebporzio) November 17, 2021

Made with Alpine.js

Tips

Someone just PR’d a good tip to the @Alpine_JS docs - thought I’d share cuz I liked it

An announcement from the Alpine Components Team

We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

🚢 New Alpine Plugin: Collapse

Easily animate the height of an element when toggling via x-show.

Check it:

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

📣 Announcing (officially) Alpine Component Patterns!

📦 UI component source code
📹 Educational screencasts 🫂 3rd-party integrations 🦑 Livewire integration

Tips

Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use Try it out here:

Tips

Create shortcut easily with @Alpine_JS

Alpine plugins are dropping, keep an eye on Caleb Porzio’s announcements.

🥳 New Alpine Plugin: Persist 🍾

Easily persist data across page loads by using a nifty little decorator function: $persist()

Tips

Another fun use case for x-effect in @Alpine_JS v3 when using the persist plugin: parsing localStorage values (string only) so you can keep using boolean values in directives. This simplified example is for a toolbar that’s either always visible or only when you hover it.

Tips

Top tips from Kevin this week.

Spend the last few hours deep diving into the source code to figure out the V3 codebase. And I must say it’s extremely readable, easy to follow, and approachable to all levels. Find the lifecycle’s start method and just go step by step.

Tips

I really like this use case for x-effect in @Alpine_JS v3. It’s an easy way to disable scrolling on the body when you open a modal or a mobile navigation. Using x-effect you don’t have to worry about enabling scrolling again when a user hits ESC or uses click.outside for example.

v3 is picking up some steam, if you’ve missed it, here are the launch tweets:

🎉 If you didn’t catch it, Alpine Version 3 has been officially released!

You can watch the Alpine Day keynote where I show all the changes and show off the new features here:

Alpine v3 code was released as part of Alpine Day (alpineday.com): github.com/alpinejs/alpine-next for everyone’s perusal.

It’s a complete internal rewrite with a focus on supporting feature extension and there’s now official Alpine.js docs: , head over there to see all the new features.

Tips

Thank you Afonso Cerejeira for this great introduction to Htmx, alpine.js and hotwire.
You might not need a frontend framework

Tips

This is how you can create an easy scroll to top button with @Alpine_JS and .

Tips

replace the turbo-frame with @Alpine_JS , no code replaced needed. perfect for django.

Alpine Day is shaping up to be awesome, here’s the announcement tweet for whoever isn’t on Twitter.

🎉 Alpine Day, June 10th 2021 is now a real thing!

🚀 Launching everything new and shiny 🎙️ Hearing from crazy awesome speakers 💰 All profit goes directly to speakers

Tips

The following is in Spanish, the gist is a reminder that there’s a way to access the parent component’s data by selecting it and accessing __x.

Caleb’s setting up an Alpine Day, there’s a mailing list you can join.

🥳 Alpine Day 2021 is now a real thing.

One day packed full of new launches and cool speakers. Gonna be a hoot! 🦉

“Q1 2021 State Of JavaScript Libraries and Tools: Frameworks” report is out 🎉🎉🎉 https://moiva.io/blog/2021-q1-state-of-js-frameworks
Best Q1 2021 Top Performers: Marko ()

I’ve got my CSS-in-JS solution for @Alpine_JS sorted 👀🤣

Let Caleb know how you use Alpine.js & what you call it:

• Alpine users, do you use Alpine with a build? (like “npm install alpinejs) Or just the file/CDN.

A few announcements this week.

Alpine Devtools v1.0.0 is out for Chrome and .

More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.

First glance at @Alpine_JS, and I can totally relate on the separation of concern!

An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

Nice thread on setting up TypeScript with Alpine.js (@samuelstancl packaged it up, see the “code” section)

Anyone interested in an article about how to set up TypeScript support for Alpine.js with a few lines of code? 😏

Here are this week’s Alpine.js adopters:

• artmuseumgr.org by is built with Alpine.js

In the past couple of weeks Alpine.js passed 14k stars (now sitting at around 14.1k) and we’ve seen websites big and small adopt Alpine.js.

Tips

🔥 If you need to pass a bound attribute to a Blade component, you can prefix the attribute name with two colons instead of one to tell Blade to not evaluate the attribute as a PHP expression.

Refactored (almost) all JavaScript on https://eurovision.tv/ to @Alpine_JS this week. Thanks !

Alpine.js on the @NativeScript website?

Alpine is at 13.4k stars at the time of writing, still a way to go to jQuery but in the same ballpark as Stimulus (which is at 10k stars at the time of writing). GitHub stars aren’t everything but you know, Ember is next on the hitlist (although they’re really not about the JS sprinkles).

Frontend Frameworks/Libraries With Most Stars on GitHub.

Seems like Alpine made some waves in the State of JS 2020, you can see the JS framework results at: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Frontend framework satisfaction (%) ranking from “State of JS 2020”

1️⃣ Svelte (89%) 2️⃣ React (88%) 3️⃣ Vue.js (85%) 4️⃣ Alpine.js (82%) 5️⃣ Preact (78%) 6️⃣ LitElement (78%) 7️⃣ Stimulus (67%) 8️⃣ Angular (42%) 9️⃣ Ember (42%)

Caleb has been dropping teasers about Alpine v3, for example the following thread:

The next version of @LaravelLivewire and will (likely) be completely driven by Vue 3’s reactivity core.

If you missed it on Twitter/GitHub, this week’s Alpine.js release (2.8.0) adds better error messages when Alpine.js hits an eval error. It uses console.warn under the hood so you might want to display those when working on an Alpine.js project.

Sample error messages:

@Alpine_JS is in this year’s State of JavaScript survey, how cool is that! pic.twitter.com/FmKl8Lu6mE

I’ve liked the combo of @rails + @Alpine_JS so far. Feels good not having to rip out the entire rails front end just to get little more ✨ in the UI/UX.

Alpine.js devtools versions 0.0.4-0.0.7 have been released within the last week. They includes fixes to the key issues of the devtools: handling page refresh and open/close properly (who knew those things would take months to fix). We got some help from @stephenoldham on the repo to give the Devtools a fresh UI, and squashed a bunch of issues since then (eg. got the size down to 50kb instead of 4MB) 👇 have a look at 0.0.7 if you haven’t used the devtools yet.

This email is supported by Learnetto. Get the full-stack JS bundle for (sale ending soon).

Vanilla Alpine.js codepen template that I made for myself https://codepen.io/pen?template=bGdzxBO

— Hugo (@hugo__df)

Decided to tidy up the Spruce docs and create a dedicated website, no more README file mess.

If you fancy reviewing, I’d love to get some feedback <3 https://docs.ryangjchandler.co.uk/spruce/

Everyone remember their first time loading Alpine.js?

First experience pulling @alpine_js into a project tonight. Felt good not to pull in a gigantic bundle size just to conditionally show an svg. Just pull alpine in from a cdn, set some html attributes and **chefs kiss** 😙😁

Request for product? Or is the Laravel TALL preset “good enough”?

Anyone ever created a product configurator with the TALL stack? Or just LiveWire+alpinejs? #tall /cc

Just replaced Vue.js with @LaravelLivewire / Alpine.js in my Twitter bio 😎

— Jason Beggs (@jasonlbeggs)

I’m experimenting with @Alpine_JS and @tailwindui and now I feel like a sorcerer.

This week’s public service announcement that friends don’t let friends not know about Alpine.js.

To illustrate this point, here are a couple of reactions to discovering Alpine.js:

Wondering how to pass data from x-for to a nested components using Alpine.js?

Stick them into the top-level element inside your x-for using .

I’ve been working on a package that allows you to take in Alpine.js components and returns some HTML.

You can try it at github.com/HugoDF/alpine-server-render or using by running npm i alpine-server-render ().

If you told me 5 years ago that my favourite part of coding today was writing HTML I’d call you crazy.

But, MY WORD, coding in Blade with Alpine and Tailwind backing it is SUCH a nice experience

— Liam Hammett (@LiamHammett)

Tips

Tip for bigger Alpine.js components, “x-if” allows you to not evaluate them at all.

🔥 Running into an issue with too many components on the page slowing things down? 🐌

In a surprising twist @Alpine_JS appears to work with Twig templates out of the box, I’m sure there may be a few edge case issues to tackle but overall I’m extremely happy and impressed!

— Rory (@roikles)

Building stuff with @Alpine_JS is so much fun.

Add the 15kb library to your site and you can pretty much build any ui-component without dependencies.

Last week, Alpine.js 2.6.0 landed with a couple of bug fixes and support for “await” inside of event handlers

🔥just landed in Alpine.js 2.6.0

Use “await” inside of event handler bindings

A short issue today but let’s start it off with some Alpine love:

.@Alpine_JS is seriously underrated

It’s an Alpine.js kind of summer, tons of new projects are using it.

Apparently, even Caleb (creator of Alpine.js) Googles how to listen for key sequences/combos, here’s his workaround

For the curious, this is my hack to listen for the “Cmd+K Cmd+E” sequence using Alpine.

We’ve got a couple of great ideas about tools & projects we might need in the Alpine.js community.

How would a translation package for Alpine.js look?

Is there any need for a Translation package build with the TALL stack? 🤔

The Tailwind Wayback project is a great stress test of the capabilities of Alpine.js and TailwindCSS.

Do you wonder what old websites would look like with modern technology? Re-creating snapshots of old websites in @tailwindcss and so on. First one coming up in a couple of days.

For anyone still not sold on Alpine? How about no context switching and no waiting for rebuilds?

First time using @Alpine_JS in a real-world context. I can’t overstate the joy of not switching context and not waiting for any compilation to complete.

Alpine.js got 400k+ JSDeliver CDN hits last month but I would be interested if everyone could fill out the Alpine.js version poll since it seems there’s a heavy skew to version 2.3.5.

.@tailwindcss was a big game changer for me the last year or two, but @Alpine_JS is quickly becoming another game changer. It makes simple, pesky stuff so quick and easy.

Congratulations to Caleb (@calebporzio for reaching $100k a year in GitHub sponsors contributions. Quite a topical tweet by @getJReviews, thanks for his support in the community.

Go check out Caleb at JSNation Live demo-ing Alpine.js

I’ll be giving a talk on @Alpine_JS today at at 11:40 AM EST

If you had told me six years ago that I would one day write HTML that looked liked this, I would have called you a lying dog-faced pony soldier. I would never write such horrible markup.

…But here we are. 🎉 pic.twitter.com/pjy3fRiEeq

There’s been a flurry of activity recently on the Alpine.js GitHub repo, it seems like we’re getting closer to getting “x-bind object of directives” syntax, which looks like:

 
   Toggle
   Modal Body


  
   
     
     
            
    
     
          
    
  

Is the following exchange with @horse_js a sign of things to come?

jquery was good

Expect a new influx of Alpine.js adopters after Evan You (creator of Vue.js) praised it earlier this week, which took the Alpine.js repo over 8k stars and the 2nd most starred JS library this month per @pacovitiello

FWIW I think is great - fills a niche where even Vue is a bit too heavy handed. I am happy to see other people take the good ideas from Vue and find good use cases for them.

A few courses have been cropping up, the latest of which is Sprinkle declarative, reactive behaviour on your HTML with Alpine JS on egghead.io by @simonswiss who apparently wrote an Alpine.js course without knowing there’s a .

We can safely say that developers enjoy being able to put Alpine.js into “stack” acronyms. What’s more, it showcases Alpine.js’s flexibility, since it’s being integrated in a variety of environments.

TALL stack - TailwindCSS Alpine.js Laravel Livewire (more on that later) coined by @stauffermatt. The latest one, the and ‘s favourite . And my personal - Serverless HTML Alpine.js TailwindCSS.

If you still haven’t installed them, the latest version of the community devtools is available on Chrome and for Firefox.

Not too many demos this week:

Alpine.js was one of Daily.dev’s picks of the week.

Tales of Alpine.js adoption:

You can now get the Alpine.js Devtools, (repo is Te7a-Houdini/alpinejs-devtools), you can get it as a Chrome Extension or Firefox Add-on. Big thanks to for kickstarting that project, and for his previous forays into it.

Awesome Alpine now has a podcasts section.

We’ve now got an thanks to

The series “Building Alpine.js” by Caleb Porzio (creator of Alpine.js) is out, first two episodes: Episode 1 - It All Starts With The Data and Episode 2 - Bringing The DOM To Life.

It turns out 70% of respondents want to use Alpine.js in conjunction with a server-rendering engine, with static site generators and HTML pages coming in at 9.5% and 14.5%, .

Interesting issue: Is there any router for alpinejs?. First off, I think a router is beyond the scope of what Alpine.js is designed to provide, but what does everyone think about the kind of use-cases where Alpine.js shines? Let me know in this Twitter poll

With Alpine.js embracing the same philosophy as TailwindCSS it’s time to come up with some new stack names, eg. Reactive Laravel apps with the
TALL stack by @stauffermatt or by .

Nested x-for loops and style bindings might be coming to Alpine.js courtesy of SimoTod and yours truly.

Welcome to the first Alpine.js Weekly edition. You can expect it in your inbox every Friday.

This week Alpine.js crossed 5000 GitHub stars.

Tailwind UI adopts Alpine.js for examples Alpine.js ❤️ Tailwind and the love is mutual. Due to their shared HTML-centric approach, Adam Wathan started creating Tailwind UI components with Alpine syntax with discussions ensuing and, once more, the dominance of React coming into play.