Hey everyone,
I just released a new plugin: React Flow for Bubble ![]()
It brings node-based visual logic (like n8n or Node-RED) directly inside your Bubble app — no code required.
Built on top of the popular open-source React Flow library, it gives you a drag-and-drop canvas where you can design, style, and execute flows live in your app.
Features
-
Drag-and-drop nodes and edges to design logic visually
-
Dual runner: run instantly client-side, or run headless in a backend workflow
-
Colour-coded execution states (watch nodes light up as the flow runs)
-
Save/load flows from your Bubble database with JSON
-
Flexible: wire any Bubble workflow to a node’s execution
Quick Start (2 minutes)
-
Drop a ReactFlowElement on your page → empty canvas appears
-
Add nodes with add_node (or preload from DB) → give each node a handler (e.g. “multiply”)
-
Connect nodes by dragging handles
-
In a workflow:
- Add onNodeExecute → switch on handler → do stuff → set_node_output
-
Trigger run_flow → nodes execute live with visual highlights
-
Need background processing? Save nodes/edges JSON → call run_flow_server in backend workflows
Use cases
-
Build your own automation tool inside Bubble
-
Create workflow builders for end users
-
Prototype logic flows visually before formalizing them
-
Combine client-side interactivity with backend power
Demo & examples: [Link]
Install here: [Link]
Would love to hear your thoughts and see what flows you all build with it! ![]()


