A simple script to allow using Alpine.js in Webflow designer.
To learn the basic usage, read my related tutorial on Medium. To interact with Webflow built-in components, check this article on Medium.
You can also check a demo site for a live example.
To initialize Alpine.js in Webflow add the following code at the bottom of the <body> element, either globally in Project Settings or via HTML Embed on each page.
<script src="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@1/dist/index.js"></script>
Next, add the following style at the top of the <body> element via HTML Embed on each page:
<link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@1/dist/style.css" rel="stylesheet">
To create an Alpine.js component add an x-data custom attribute to any HTML element. For example it can contain the value { open: false }.
To display a value of an expression, use x-text or x-html attribute with value containing the expresion, for example open.
To set an attribute value to result of an expression, add an x-bind attribute (shorthand starting with : symbol cannot be used in Webflow). For example x-bind:class with value myclass
To add an event handler, add a x-on custom attribute (shorthand starting with @ symbol cannot be used in Webflow). For example to react to a mouse click, add x-on:click attribute with value open = true.
Attributes containing a dot . character in their name are not allowed in Webflow. To bypass this limitation, use another : character instead. For example, add x-on:click:away attribute with value open = false.
In Webflow it's not possible to create a <template> element in the designer, and it is necessary for x-if conditionals. To solve this issue, this script automatically transforms any element containing x-if into <template>. For example we can create a conditional Div Block with x-if attribute with open value.
Similarly to conditional statements, any element containing x-for is automatically converted to <template>. For example, to initialize a loop, simply create a div block with x-for attribute equal to item in items, and x-bind:key attribute with value item.
When refreshing the site, the hidden content is briefly displayed, creating an ugly flickering effect. To hide an element before Alpine.js is initialized, add an x-cloak attribute with any value to it. You can add .uncloak class to such element to make it temporarily visible during development.
This script also simplifies interacting with built-in Webflow components, such as Slider, Tabs or Lightbox.
Wrap the slider in a Div Block and initialize the component by adding x-data attribute with slider value.
The component contains slide variable indicating current slide index (read/write) and slideCount variable (read-only). It also contains nextSlide() and previousSlide() convenience methods.
Wrap the slider in a Div Block and initialize the component by adding x-data attribute with tabs value.
The component contains tab variable indicating current tab index (read/write) and tabCount variable (read-only). It also contains nextTab() and previousTab() convenience methods.
For more information how to use Alpine.js please refer to the official documentation. If you notice something not working as expected in Webflow, do not hesitate to report errors here.