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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.