> 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/element-reference/actions/load-nodes-and-edges.md).

# Load nodes and edges

## Summary

Loads node and edge data into the React Flow chart. Supports both explicit edge lists and node relationship-based edges. This is the primary action for populating your flow chart with data.

### Action fields

Configure the data sources and behavior for loading nodes and edges. The Node and Edge data types are defined in the element properties.

| Name                                                    | Type                         | Summary                                                                                                                                                                                                                                                                                 |
| ------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Nodes list](#nodes-list)                               | `list of` Node data type\`\` | List of node objects to display in the flow chart. This should be a list of things matching your Node data type defined in element properties.                                                                                                                                          |
| [Edges list](#edges-list)                               | `list of` Edge data type\`\` | List of edge objects for explicit connections. Optional if you're using node parent/child relationships instead. Uses the Edge data type defined in element properties.                                                                                                                 |
| [Clear existing data](#clear-existing-data)             | `yes/no`                     | When enabled, clears all existing nodes and edges before loading new data. When disabled, adds to existing data.                                                                                                                                                                        |
| [Auto-generate node IDs](#auto-generate-node-ids)       | `yes/no`                     | When enabled, nodes without an ID (based on your Node ID field) will automatically get a unique generated ID like 'id\_123456'.                                                                                                                                                         |
| [Fit view after load](#fit-view-after-load)             | `yes/no`                     | When enabled, automatically adjusts the zoom and pan to fit all loaded nodes in the viewport after loading completes.                                                                                                                                                                   |
| [Custom node settings JSON](#custom-node-settings-json) | `text`                       | JSON object with node properties that override element settings for this action only (e.g., {"draggable": false, "style": {"border": "2px solid red"}}). Optional.                                                                                                                      |
| [Custom edge settings JSON](#custom-edge-settings-json) | `text`                       | JSON object with edge properties that override element settings for this action only (e.g., {"animated": false, "style": {"strokeWidth": 3}}). Optional.                                                                                                                                |
| [Enable auto layout](#enable-auto-layout)               | `yes/no`                     | When enabled, nodes will be automatically positioned using the Dagre algorithm. This overrides any manual node positions and arranges nodes to minimize edge crossings with optimal spacing. Layout direction and node dimensions are configured in the element's Auto layout settings. |

***

## Action fields

Configure the data sources and behavior for loading nodes and edges. The Node and Edge data types are defined in the element properties.

### Nodes list

**Type:** `list of` Node data type\`\`

List of node objects to display in the flow chart. This should be a list of things matching your Node data type defined in element properties.

***

### Edges list

**Type:** `list of` Edge data type\`\`

List of edge objects for explicit connections. Optional if you're using node parent/child relationships instead. Uses the Edge data type defined in element properties.

***

### Clear existing data

**Type:** `yes/no`

When enabled, clears all existing nodes and edges before loading new data. When disabled, adds to existing data.

***

### Auto-generate node IDs

**Type:** `yes/no`

When enabled, nodes without an ID (based on your Node ID field) will automatically get a unique generated ID like 'id\_123456'.

***

### Fit view after load

**Type:** `yes/no`

When enabled, automatically adjusts the zoom and pan to fit all loaded nodes in the viewport after loading completes.

***

### Custom node settings JSON

**Type:** `text`

JSON object with node properties that override element settings for this action only (e.g., {"draggable": false, "style": {"border": "2px solid red"}}). Optional.

***

### Custom edge settings JSON

**Type:** `text`

JSON object with edge properties that override element settings for this action only (e.g., {"animated": false, "style": {"strokeWidth": 3}}). Optional.

***

### Enable auto layout

**Type:** `yes/no`

When enabled, nodes will be automatically positioned using the Dagre algorithm. This overrides any manual node positions and arranges nodes to minimize edge crossings with optimal spacing. Layout direction and node dimensions are configured in the element's Auto layout settings.

***