> For the complete documentation index, see [llms.txt](https://enhancio.gitbook.io/reactflow-for-bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enhancio.gitbook.io/reactflow-for-bubble.io/getting-started/quickstart.md).

# 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

{% stepper %}
{% step %}
**Install the plugin**

Install this plugin in your app's Bubble editor *Installed plugins* section.
{% endstep %}

{% step %}

#### 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)
  {% endstep %}

{% step %}

#### Add React Flow Element

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

* Set [Node data type](/reactflow-for-bubble.io/element-reference/fields.md#node-data-type) to your created data type
* Map [Node ID field](/reactflow-for-bubble.io/element-reference/fields.md#node-id-field) to your unique ID field
* Map [Node label field](/reactflow-for-bubble.io/element-reference/fields.md#node-label-field) to your display text field
* Map position fields ([X](/reactflow-for-bubble.io/element-reference/fields.md#node-x-position-field) and [Y](/reactflow-for-bubble.io/element-reference/fields.md#node-y-position-field)) to your number fields
  {% endstep %}

{% step %}

#### Load Data with Actions

Create a workflow (trigger on "Page is loaded") and add [Load nodes and edges](/reactflow-for-bubble.io/element-reference/actions/load-nodes-and-edges.md) action:

* Set "Nodes list" to a search or list of your node data type
* Enable "Fit view after load" to show all nodes nicely
  {% endstep %}

{% step %}

#### That's it!

Your interactive chart loads and users can drag nodes around.

Next steps: [**Creating Connections**](/reactflow-for-bubble.io/getting-started/creating-connections.md) between nodes, making the chart [**Interactive**](/reactflow-for-bubble.io/guides/interactivity.md), or dive into the [**Reference**](/reactflow-for-bubble.io/element-reference/overview.md). Check out our [**Demo**](https://react-flow-demo.bubbleapps.io/version-test) to see how it's built.

Having trouble? Don't hesitate to reach out - we're here to help!
{% endstep %}
{% endstepper %}