Quick Start

This page will give you brief instructions about how to set-up the ReactFlow: Node-based Graph/Diagram plugin in your Bubble app.

Instructions

1

Install the plugin

Install this plugin in your app's Bubble editor Installed plugins section.

2

Create Your Node Data Type

First, create a data type in your database for nodes (e.g., "Task", "Person", "Process Step"). Add these essential fields:

• Text or number field for unique ID (needed for connecting nodes and saving changes back to database)

• Text field for the node label/title

• Number fields for X and Y position (without these, all nodes stack at 0,0)

3

Add React Flow Element

Drag React Flow element onto your page. In the element properties:

• Set Node data type to your created data type

• Map Node ID field to your unique ID field

• Map Node label field to your display text field

• Map position fields (X and Y) to your number fields

4

Load Data with Actions

Create a workflow (trigger on "Page is loaded") and add Load nodes and edges action:

• Set "Nodes list" to a search or list of your node data type

• Enable "Fit view after load" to show all nodes nicely

5

That's it!

Your interactive chart loads and users can drag nodes around.

Next steps: Creating Connections between nodes, making the chart Interactive, or dive into the Reference. Check out our Demo to see how it's built.

Having trouble? Don't hesitate to reach out - we're here to help!