Documentation
Welcome to the FlowScript documentation! FlowScript is an innovative plugin for Webflow that simplifies the integration of JavaScript (JS) code into your Webflow site. It transforms your site into a dynamic and reactive platform through an efficient State System. This guide will walk you through leveraging FlowScript to enrich your Webflow projects with dynamic JS functionalities.
State System
At the heart of FlowScript lies the state system, designed as a straightforward key-value dictionary. This system allows you to manage and dynamically update your website's content and behavior. You can access and modify these values using two core functions:
getState: Retrieves the current value of a state variable.setState: Updates the value of a state variable.
While setting default values for your state variables is optional, it is highly recommended for a smoother initialization process.
Actions
FlowScript enhances your Webflow elements by enabling you to attach actions—akin to event listeners in JavaScript. These actions are activated in response to specific events on the designated elements. Within FlowScript, the following variables are at your disposal when scripting actions:
this: The DOM Element on which the action is triggered.event: The JavaScript Event object associated with the trigger.
Additionally, you are provided with two essential functions for state management:
getState: A function to retrieve a state's current value.setState: A function to update a state's value.
Note: FlowScript supports the async/await syntax directly in your scripts, allowing for asynchronous operations without the need for wrapping them in self-invoking functions.
The Element Rendered Action
A unique feature of FlowScript is the Element Rendered action. This action does not have a direct equivalent in vanilla JavaScript. FlowScript invokes the Element Rendered action when an element is initially rendered on the page or re-rendered due to a state change affecting it. This mechanism ensures that your elements always display the most current data and state.
Special Functions
To interact with the state system, FlowScript provides two fundamental functions:
getState
Retrieves the value associated with a specified state variable.
let value = getState('variableName');
markdown Copy code
Introduction
Welcome to the FlowScript documentation! FlowScript is an innovative plugin for Webflow that simplifies the integration of JavaScript (JS) code into your Webflow site. It transforms your site into a dynamic and reactive platform through an efficient State System. This guide will walk you through leveraging FlowScript to enrich your Webflow projects with dynamic JS functionalities.
State System
At the heart of FlowScript lies the state system, designed as a straightforward key-value dictionary. This system allows you to manage and dynamically update your website's content and behavior. You can access and modify these values using two core functions:
getState: Retrieves the current value of a state variable.setState: Updates the value of a state variable.
While setting default values for your state variables is optional, it is highly recommended for a smoother initialization process.
Actions
FlowScript enhances your Webflow elements by enabling you to attach actions—akin to event listeners in JavaScript. These actions are activated in response to specific events on the designated elements. Within FlowScript, the following variables are at your disposal when scripting actions:
this: The DOM Element on which the action is triggered.event: The JavaScript Event object associated with the trigger.
Additionally, you are provided with two essential functions for state management:
getState: A function to retrieve a state's current value.setState: A function to update a state's value.
Note: FlowScript supports the async/await syntax directly in your scripts, allowing for asynchronous operations without the need for wrapping them in self-invoking functions.
The Element Rendered Action
A unique feature of FlowScript is the Element Rendered action. This action does not have a direct equivalent in vanilla JavaScript. FlowScript invokes the Element Rendered action when an element is initially rendered on the page or re-rendered due to a state change affecting it. This mechanism ensures that your elements always display the most current data and state.
Special Functions
To interact with the state system, FlowScript provides two fundamental functions:
getState
The getState function is used to retrieve the value of a specific state variable. It takes a single parameter:
- key (string): The name of the state variable whose value you wish to retrieve.
The function returns the value associated with the specified key, which can be of any type.
let value = getState('variableName'); // Retrieves the current value of 'variableName'
setState
The setState function updates the value of a specified state variable and potentially triggers a re-render of any elements dependent on this variable. It accepts two parameters:
- key (string): The name of the state variable you want to update.
- value (any type): The new value to assign to the state variable. This value can be of any type, allowing for flexible state management.
setState('variableName', 'New Value'); // Updates 'variableName' with 'New Value'
This documentation aims to provide a clear and comprehensive understanding of FlowScript's capabilities. By integrating FlowScript into your Webflow projects, you unlock the potential for more interactive, dynamic, and responsive web experiences. If you have suggestions or ideas on improving this guide, please let us know. Happy coding!