# 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. *** --- # 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: ``` GET https://enhancio.gitbook.io/reactflow-for-bubble.io/element-reference/actions/load-nodes-and-edges.md?ask= ``` 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.