Webflow + Alpine.js

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:

And here’s the demo: https://webflow.com/website/alpinejs-demo

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.

2 Likes

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!

1 Like

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).

I have just updated the tool to Alpine.js 3 (released last week). Now it’s even easier to use - only one script, no need for custom init of components, etc.

Hello! I have been looking through your posts and they are really informative and super helpful. Even with my non-existent coding knowledge, I’ve managed to get 2 sliders synced and working as you explain here.

One major limitation that I’ve found with Webflow slider is that it’e not possible to create a link to a specific slide.

Is there a workaround for this with Alpine.js?

Thank you!