webflow-alpinejs
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.
Initialization
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@2/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@2/dist/style.css" rel="stylesheet">
Initialize a component
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 }
.
Displaying expressions
To display a value of an expression, use x-text
or x-html
attribute with value containing the expresion, for example open
.
Binding
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
Event handlers
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
.
Modifiers
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
.
Conditional statements
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 wraps any element containing x-if
in a <template>
. For example we can create a conditional Div Block with x-if
attribute with open
value.
For loops
Similarly to conditional statements, any element containing x-for
is automatically wrapped in a <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
.
Cloak
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.
Components
This script also simplifies interacting with built-in Webflow components, such as Slider, Tabs or Lightbox.
Slider
Wrap the slider in a Div Block and initialize the component by adding x-data
attribute with slider
value. You can also attach to any slider component on the page by passing it's selector as a parameter, e.g. slider('#myslider')
.
The component contains slide
variable indicating current slide index (read/write) and slideCount
variable (read-only). It also contains nextSlide()
and previousSlide()
convenience methods.
Tabs
Wrap the slider in a Div Block and initialize the component by adding x-data
attribute with tabs
value. You can also attach to any tabs component on the page by passing it's selector as a parameter, e.g. tabs('#mytabs')
.
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.