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

Hey everyone,

I just released a new plugin: React Flow for Bubble :tada:

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.


:key: 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


:rocket: 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


:light_bulb: 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


:backhand_index_pointing_right: Demo & examples: [Link]

:backhand_index_pointing_right: Install here: [Link]

Would love to hear your thoughts and see what flows you all build with it! :raising_hands:

4 Likes