Webflow + Alpine.js
A match from heaven
To add interactive behavior to a Webflow site, the standard options involve writing imperative JavaScript or defining it via a point-and-click Interactions interface. Neither of these fit my personal style, so I decided to use Alpine.js.
Alpine.js is a minimal JavaScript framework for composing behaviors directly in HTML markup. It offers the reactive and declarative experience of big frameworks like Vue.js or React but, crucially, remains much simpler than them.
The fact that Alpine.js initializes almost instantaneously and the code lives directly in element attributes, makes it a perfect fit for Webflow sites.
So, how can you use Alpine.js in Webflow?
TL;DR
Go straight to the solution by visiting a demo site:
To see the code, visit this Read-only link.
Initializing Alpine.js
To initialize Alpine.js in Webflow, include the following script tag at the end 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@3/dist/index.js"></script>Please refer to my article “How to add custom code to Webflow” to learn more about custom code in Webflow.
Next, add the HTML Embed containing the following style tag at the beginning of the <body> element on each page:
<link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@3/dist/style.css" rel="stylesheet">Note: in addition to containing standard Alpine.js distribution, this script addresses several limitations of Alpine.js in Webflow. In particular, it allows you to create
<template>elements, which are necessary for conditionals and loops, and to use directive modifiers. See the documentation to learn more.
Adding Alpine.js directives via custom attributes
Alpine.js directives, used to add behavior to your website, are declared as custom element attributes. To add a custom attribute to an element in Webflow Designer, go to the Element Settings tab and click the plus icon on the custom attributes panel:
In this article, custom attributes will be described as follows:
attribute-name="attribute-value"which corresponds to the following settings in Webflow Designer:
Alpine.js example: a dropdown menu
In this short tutorial, you will create a simple dropdown menu using Alpine.js:
After completing the below steps, you should end up with the following structure in Webflow Designer:
Keep in mind that the interactive menu will be usable only on a live site, and not in Webflow Designer or Preview.
1. Initialize the dropdown menu component
Create a div block element representing the dropdown menu component and initialize it in closed state by applying the following x-data directive to this element:
x-data="{ open: false }"
2. Define the dropdown menu content
Create a Menu Content div block element inside the dropdown menu component. Set its Position to Absolute, with a solid background color.
Next, create three link elements.
Finally, show the menu content only if the open variable is true, by applying the following x-show directive to the Menu Content element:
x-show="open"
3. Open the menu with x-on:click event listener
Create a Button element inside the div block that will open the dropdown menu. Add the x-on:click directive to attach a mouse click event listener to the button, that will update the open variable:
x-on:click="open = true"Note that in Webflow you need to use a full directive name
x-on:click, instead of a@clickshorthand.
4. Close the menu with .outside modifier
To close the dropdown menu, apply the following x-on:click directive with the .outside modifier to the Menu Content element:
x-on:click:outside="open = false"Note that in Webflow the dot
.character used in modifiers needs to be replaced by the colon:character.
5. Hide the menu before framework initialization via x-cloak
You might notice that when loading the page, the hidden menu content is displayed for a brief moment, creating an ugly flickering effect. To hide an element until Alpine.js is fully initialized, apply the following x-cloak directive to the Menu Content element:
x-cloak="1"It doesn’t matter what value you set for this binary attribute.
If you want to display a hidden element in Webflow Designer to make changes to it, add a uncloak class to this element (it will remain hidden on the live site):
Bonus: display menu items with a x-for loop
If you want to avoid repeating the menu links or if the link list is dynamic, you can use a loop directive.
First, create a div block element inside the Menu Content element and apply the following x-for directive to it:
x-for="link in [{ label: 'One', url: '/one' }, { label: 'Two', url: '/two' }, { label: 'Three', url: '/three' }]"Next, create a link element inside the div block, and apply the following x-text and x-bind directives to it:
x-text="link.label"
x-bind:href="link.url"
Similarly, the middle link can be conditionally omitted by wrapping the link element in a div block element containing the following x-if directive:
x-if="link.label !== 'Two'"
Note that in standard Alpine.js you’d use a
<template>element instead of a div block<div>element. However, since Webflow doesn’t allow creating<template>elements directly, all elements containing thex-fororx-ifcustom attribute will be automatically wrapped in<template>elements.
Conclusion
There you have it — Alpine.js in Webflow!
I have created a simple demo site to illustrate this article. To see it in action visit the demo page and to examine the code follow the preview link.
This is just the beginning —please see my follow-up article on how to interact with built-in Webflow Slider component via Alpine.js:
Edit: this article was updated for Alpine.js 3, released June 2021.
