⚡ New Plugin: React Flow for Bubble (Visual Logic Graphs) Desktop/Mobile

[paulogustavopeixoto]

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)

1. Drop a ReactFlowElement on your page → empty canvas appears

2. Add nodes with add_node (or preload from DB) → give each node a handler (e.g. “multiply”)

3. Connect nodes by dragging handles

4. In a workflow:

   • Add onNodeExecute → switch on handler → do stuff → set_node_output

5. Trigger run_flow → nodes execute live with visual highlights

6. 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!

[ccatalano]

Does this only work with the bubble backend? I’m using xano for my backend and want to build an automation builder for my users.

[paulogustavopeixoto]

this works with any backend really since you can attach any api endpoint to a node. That way you can build your logic in xano workflow and retrieve the api credentials and attach them to a node.