# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enhancio.gitbook.io/reactflow-for-bubble.io/getting-started/quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.