Webflow + Alpine.js

Jarek · February 21, 2021, 3:39pm

Are you struggling with maintaining messy JavaScript on your Webflow sites?

Alpine.js is a rugged, minimal framework for composing JavaScript behavior in your markup. It offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

A while back I wrote two articles about using Alpine.js in Webflow designer:

Webflow + Alpine.js: https://jareklipski.medium.com/webflow-alpine-js-d53d77e3293
Interacting with the Webflow Slider Component using Alpine.js: https://jareklipski.medium.com/interacting-with-the-webflow-slider-component-using-alpine-js-c154885feaed

And here’s the demo: alpinejs-demo - Webflow

Please let me know what you think about this approach. Your feedback is very much appreciated as I intend to develop it further and perhaps write more similar articles.

tterado · February 21, 2021, 3:42pm

This is really awesome. Will look to implement this approach with future sliders.

Was thinking about this on one of my slider projects where the Slider had limited functionality. Great stuff!

Jarek · February 21, 2021, 3:49pm

Thanks! Let me know if you discover any limitations / have any suggestions. The solution is pretty new and simple - I am sure there are many improvements to be made. Also writing more wrappers around native Webflow components should be relatively straightforward (thanks to MutationObserver).