# Fields ## Summary ### Nodes typing Configure the field mapping for flow chart nodes. The node data type is required - create a data type in your Bubble database with the corresponding fields. Actual node data is loaded using the "Load nodes and edges" action. | Name | Type | Summary | | ----------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Node data type](#node-data-type) | `app type` | The Bubble data type representing a single node. This field is required. Select the type of thing in your app that each node should represent. | | [Node ID field](#node-id-field) | `field of` Node data type\`\` | Field in your Node data type that uniquely identifies each node. If not provided, IDs will be auto-generated when the "Auto-generate node IDs" option is enabled in actions. | | [Node label field](#node-label-field) | `field of` Node data type\`\` | Field in your Node data type for the node label or display text. Optional. | | [Node image field](#node-image-field) | `field of` Node data type\`\` | Optional field in your Node data type containing the image URL to display in the node. By default image will be rendered below the label. The image styles and positioning can be changed using 'Custom CSS' element field in Advanced fields section. | | [Node X position field](#node-x-position-field) | `field of` Node data type\`\` | Field for the node's horizontal position on the canvas. Defaults to 0 if not provided. Optional. | | [Node Y position field](#node-y-position-field) | `field of` Node data type\`\` | Field for the node's vertical position on the canvas. Defaults to 0 if not provided. Optional. | | [Node type field](#node-type-field) | `field of` Node data type\`\` | Field that specifies the React Flow node type (default, input, output, group). If not provided, all nodes will use the "default" type. Optional. | | [(Adv.) Node JSON field](#adv-node-json-field) | `field of` Node data type\`\` | Field containing custom JSON properties to extend each node. The JSON will be merged with the node object, allowing you to set additional ReactFlow node properties like className, style, hidden, etc. Example: {"className": "special-node", "style": {"backgroundColor": "#ff0000"}, "hidden": false}. You can use className to apply custom CSS styles in the Custom CSS field. | ### Node typing - relationships Configure parent-child relationships between nodes. These fields allow you to define connections through data relationships rather than separate edge objects. | Name | Type | Summary | | ------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Node parents field](#node-parents-field) | `field of` Node data type\`\` | Field containing parent node IDs. Can be a single text field (one parent) or a list of texts (multiple parents). When specified, edges will be automatically created from each parent to this node. Optional. | | [Node children field](#node-children-field) | `field of` Node data type\`\` | Field containing child node IDs. Can be a single text field (one child) or a list of texts (multiple children). When specified, edges will be automatically created from this node to each child. Optional. | ### Edges typing Configure the field mapping for explicit flow chart edges. This is optional - you can use node relationships instead. If you have a separate data type for edges, configure the field mappings here. | Name | Type | Summary | | ---------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Edge data type](#edge-data-type) | `app type` | The Bubble data type representing edges/connections. Only needed if you want to load edges from a separate list rather than using node relationships. Optional. | | [Edge ID field](#edge-id-field) | `field of` Edge data type\`\` | Field that uniquely identifies each edge. If not provided, IDs will be auto-generated. Optional. | | [Edge source field](#edge-source-field) | `field of` Edge data type\`\` | Field containing the ID of the source node for this edge. Required if using explicit edge data. | | [Edge target field](#edge-target-field) | `field of` Edge data type\`\` | Field containing the ID of the target node for this edge. Required if using explicit edge data. | | [Edge label field](#edge-label-field) | `field of` Edge data type\`\` | Field containing the display text for the edge. Optional. | | [Edge type field](#edge-type-field) | `field of` Edge data type\`\` | Field that specifies the React Flow edge type (default, straight, step, smoothstep, bezier). Defaults to "default" if not provided. Optional. | | [(Adv.) Edge JSON field](#adv-edge-json-field) | `field of` Edge data type\`\` | Field containing custom JSON properties to extend each edge. The JSON will be merged with the edge object, allowing you to set additional ReactFlow edge properties like className, style, animated, markerStart, markerEnd, etc. | ### General appearance Configure the visual components and display options for the React Flow chart. | Name | Type | Summary | | ------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- | | [Show mini map](#show-mini-map) | `yes/no` | Display a miniature overview of the entire flow chart for easy navigation. | | [Show controls](#show-controls) | `yes/no` | Display zoom and fit view control buttons in the bottom left corner. | | [Background](#background) | `dropdown` | Background pattern for the canvas. | | [Color mode](#color-mode) | `dropdown` | Theme mode for the React Flow chart. Options: "light", "dark", or "system" (follows browser/OS preference). | ### Interaction behavior Control how users can interact with nodes and the canvas. | Name | Type | Summary | | ------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------ | | [Nodes draggable](#nodes-draggable) | `boolean` | Enable/disable dragging of nodes. When disabled, nodes are fixed in position and cannot be moved by users. | | [Elements selectable](#elements-selectable) | `boolean` | Enable/disable selection of nodes and edges. When disabled, users cannot select any elements (useful for read-only displays). | | [Nodes connectable](#nodes-connectable) | `boolean` | Enable/disable creating new connections between nodes. When disabled, users cannot drag from node handles to create new edges. | | [Pan on drag](#pan-on-drag) | `boolean` | Enable/disable panning the canvas by dragging empty space. When enabled, users can drag the background to move the viewport. | ### Auto layout Auto-layout automatically positions nodes in your chart. Auto-layout can be enabled in the "Load nodes and edges" action or run using a dedicated "Auto layout" action. Auto-layout uses the Dagre algorithm to minimize edge crossings and optimize spacing between nodes. | Name | Type | Summary | | ------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | [Layout direction](#layout-direction) | `dropdown` | Direction for automatic layout. Options: "TB" (top to bottom), "BT" (bottom to top), "LR" (left to right), "RL" (right to left). | | [Node width for layout](#node-width-for-layout) | `number` | Width of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled. | | [Node height for layout](#node-height-for-layout) | `number` | Height of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled. | ### Node appearance (advanced) Configure default styling and behavior for nodes. | Name | Type | Summary | | ----------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Node settings JSON](#node-settings-json) | `text` | JSON object with default properties applied to all nodes (e.g., {"draggable": true, "style": {"background": "#fff"}}). These settings can be overridden by action-specific settings. Optional. | ### Node template (advanced) Override layout of the nodes content. It allows you to display your specific Bubble data in the nodes. See demo for examples and reference. | Name | Type | Summary | | ----------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Enable custom templates](#enable-custom-templates) | `yes/no` | Render nodes (with default node type) using the defined custom templates. | | [Custom node template](#custom-node-template) | `text` | Custom template allows you to override HTML displayed in the nodes and display app specific data in the nodes. This field defines template for nodes with type "default" (or not set). It requires "Enable custom templates" to be enabled. Use HTM syntax with <${Component}> for React components. Access to label, imageUrl, nodeData (all bubble node data in your database), Handle component, and Position enum. To see all variables you can use in the template, enable "Debug template variables" field. See demo for examples or HTM template library for syntax. | | [Debug template variables](#debug-template-variables) | `yes/no` | Enable debug logging of template variables to browser console. Useful for development and troubleshooting custom templates. Shows all available variables you can use in the template. | ### Edge appearance (advanced) Configure default styling and behavior for edges. | Name | Type | Summary | | ----------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Default edge type](#default-edge-type) | `dropdown` | Visual style of edges. Options: "bezier" (smooth curves, default), "straight" (direct lines), "step" (right-angled for flowcharts), "smoothstep" (step with rounded corners). | | [Edge animated](#edge-animated) | `yes/no` | Whether edges should be animated by default. Animated edges show flowing dots along the connection. | | [Edge start marker](#edge-start-marker) | `dropdown` | Arrow marker at the start of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow). | | [Edge end marker](#edge-end-marker) | `dropdown` | Arrow marker at the end of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow). | | [Edge settings JSON](#edge-settings-json) | `text` | JSON object with default properties applied to all edges (e.g., {"animated": true, "style": {"stroke": "#999"}}). These settings can be overridden by action-specific settings. Optional. | ### Advanced Configuration | Name | Type | Summary | | ----------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [ReactFlow props JSON](#reactflow-props-json) | `text` | Advanced: JSON object with React Flow component props for custom configuration. Overrides default settings. Example: {"fitView": true, "panOnDrag": false} | | [MiniMap props JSON](#minimap-props-json) | `text` | Advanced: JSON object with MiniMap component props for custom configuration. Example: {"nodeColor": "#ff0000", "maskColor": "rgba(0,0,0,0.1)"} | | [Controls props JSON](#controls-props-json) | `text` | Advanced: JSON object with Controls component props for custom configuration. Example: {"showZoom": true, "showFitView": false, "showInteractive": true} | | [Background props JSON](#background-props-json) | `text` | Advanced: JSON object with Background component props for custom configuration. Example: {"gap": 12, "size": 1, "color": "#f1f1f1"} | | [Debug to console](#debug-to-console) | `boolean` | When enabled, outputs the constructed ReactFlow properties and nodes/edges JSONs to the browser console. Useful for advanced users to see current settings and construct reactFlowPropsJSON values. Check browser dev tools console. | | [Custom CSS](#custom-css) | `text` | Custom CSS styles for advanced appearance customization. You can use placeholder {ELEMENT\_ID} that will be replaced with the plugin element ID that we recommend to use since the styles are appended to the page styles globally. See the demo for examples and reference. | *** ## Nodes typing Configure the field mapping for flow chart nodes. The node data type is required - create a data type in your Bubble database with the corresponding fields. Actual node data is loaded using the "Load nodes and edges" action. ### Node data type **Type:** `app type` The Bubble data type representing a single node. This field is required. Select the type of thing in your app that each node should represent. *** ### Node ID field **Type:** `field of` Node data type\`\` Field in your Node data type that uniquely identifies each node. If not provided, IDs will be auto-generated when the "Auto-generate node IDs" option is enabled in actions. *** ### Node label field **Type:** `field of` Node data type\`\` Field in your Node data type for the node label or display text. Optional. *** ### Node image field **Type:** `field of` Node data type\`\` Optional field in your Node data type containing the image URL to display in the node. By default image will be rendered below the label. The image styles and positioning can be changed using 'Custom CSS' element field in Advanced fields section. *** ### Node X position field **Type:** `field of` Node data type\`\` Field for the node's horizontal position on the canvas. Defaults to 0 if not provided. Optional. *** ### Node Y position field **Type:** `field of` Node data type\`\` Field for the node's vertical position on the canvas. Defaults to 0 if not provided. Optional. *** ### Node type field **Type:** `field of` Node data type\`\` Field that specifies the React Flow node type (default, input, output, group). If not provided, all nodes will use the "default" type. Optional. *** ### (Adv.) Node JSON field **Type:** `field of` Node data type\`\` Field containing custom JSON properties to extend each node. The JSON will be merged with the node object, allowing you to set additional ReactFlow node properties like className, style, hidden, etc. Example: {"className": "special-node", "style": {"backgroundColor": "#ff0000"}, "hidden": false}. You can use className to apply custom CSS styles in the Custom CSS field. *** ## Node typing - relationships Configure parent-child relationships between nodes. These fields allow you to define connections through data relationships rather than separate edge objects. ### Node parents field **Type:** `field of` Node data type\`\` Field containing parent node IDs. Can be a single text field (one parent) or a list of texts (multiple parents). When specified, edges will be automatically created from each parent to this node. Optional. *** ### Node children field **Type:** `field of` Node data type\`\` Field containing child node IDs. Can be a single text field (one child) or a list of texts (multiple children). When specified, edges will be automatically created from this node to each child. Optional. *** ## Edges typing Configure the field mapping for explicit flow chart edges. This is optional - you can use node relationships instead. If you have a separate data type for edges, configure the field mappings here. ### Edge data type **Type:** `app type` The Bubble data type representing edges/connections. Only needed if you want to load edges from a separate list rather than using node relationships. Optional. *** ### Edge ID field **Type:** `field of` Edge data type\`\` Field that uniquely identifies each edge. If not provided, IDs will be auto-generated. Optional. *** ### Edge source field **Type:** `field of` Edge data type\`\` Field containing the ID of the source node for this edge. Required if using explicit edge data. *** ### Edge target field **Type:** `field of` Edge data type\`\` Field containing the ID of the target node for this edge. Required if using explicit edge data. *** ### Edge label field **Type:** `field of` Edge data type\`\` Field containing the display text for the edge. Optional. *** ### Edge type field **Type:** `field of` Edge data type\`\` Field that specifies the React Flow edge type (default, straight, step, smoothstep, bezier). Defaults to "default" if not provided. Optional. *** ### (Adv.) Edge JSON field **Type:** `field of` Edge data type\`\` Field containing custom JSON properties to extend each edge. The JSON will be merged with the edge object, allowing you to set additional ReactFlow edge properties like className, style, animated, markerStart, markerEnd, etc. *** ## General appearance Configure the visual components and display options for the React Flow chart. ### Show mini map **Type:** `yes/no` Display a miniature overview of the entire flow chart for easy navigation. *** ### Show controls **Type:** `yes/no` Display zoom and fit view control buttons in the bottom left corner. *** ### Background **Type:** `dropdown` Background pattern for the canvas. *** ### Color mode **Type:** `dropdown` Theme mode for the React Flow chart. Options: "light", "dark", or "system" (follows browser/OS preference). *** ## Interaction behavior Control how users can interact with nodes and the canvas. ### Nodes draggable **Type:** `boolean` Enable/disable dragging of nodes. When disabled, nodes are fixed in position and cannot be moved by users. *** ### Elements selectable **Type:** `boolean` Enable/disable selection of nodes and edges. When disabled, users cannot select any elements (useful for read-only displays). *** ### Nodes connectable **Type:** `boolean` Enable/disable creating new connections between nodes. When disabled, users cannot drag from node handles to create new edges. *** ### Pan on drag **Type:** `boolean` Enable/disable panning the canvas by dragging empty space. When enabled, users can drag the background to move the viewport. *** ## Auto layout Auto-layout automatically positions nodes in your chart. Auto-layout can be enabled in the "Load nodes and edges" action or run using a dedicated "Auto layout" action. Auto-layout uses the Dagre algorithm to minimize edge crossings and optimize spacing between nodes. ### Layout direction **Type:** `dropdown` Direction for automatic layout. Options: "TB" (top to bottom), "BT" (bottom to top), "LR" (left to right), "RL" (right to left). *** ### Node width for layout **Type:** `number` Width of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled. *** ### Node height for layout **Type:** `number` Height of nodes in pixels for layout calculations. This affects spacing and positioning when auto-layout is enabled. *** ## Node appearance (advanced) Configure default styling and behavior for nodes. ### Node settings JSON **Type:** `text` JSON object with default properties applied to all nodes (e.g., {"draggable": true, "style": {"background": "#fff"}}). These settings can be overridden by action-specific settings. Optional. *** ## Node template (advanced) Override layout of the nodes content. It allows you to display your specific Bubble data in the nodes. See demo for examples and reference. ### Enable custom templates **Type:** `yes/no` Render nodes (with default node type) using the defined custom templates. *** ### Custom node template **Type:** `text` Custom template allows you to override HTML displayed in the nodes and display app specific data in the nodes. This field defines template for nodes with type "default" (or not set). It requires "Enable custom templates" to be enabled. Use HTM syntax with <${Component}> for React components. Access to label, imageUrl, nodeData (all bubble node data in your database), Handle component, and Position enum. To see all variables you can use in the template, enable "Debug template variables" field. See demo for examples or HTM template library for syntax. *** ### Debug template variables **Type:** `yes/no` Enable debug logging of template variables to browser console. Useful for development and troubleshooting custom templates. Shows all available variables you can use in the template. *** ## Edge appearance (advanced) Configure default styling and behavior for edges. ### Default edge type **Type:** `dropdown` Visual style of edges. Options: "bezier" (smooth curves, default), "straight" (direct lines), "step" (right-angled for flowcharts), "smoothstep" (step with rounded corners). *** ### Edge animated **Type:** `yes/no` Whether edges should be animated by default. Animated edges show flowing dots along the connection. *** ### Edge start marker **Type:** `dropdown` Arrow marker at the start of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow). *** ### Edge end marker **Type:** `dropdown` Arrow marker at the end of edges. Options: "none" (no arrow), "arrow" (open arrow), "arrowclosed" (filled arrow). *** ### Edge settings JSON **Type:** `text` JSON object with default properties applied to all edges (e.g., {"animated": true, "style": {"stroke": "#999"}}). These settings can be overridden by action-specific settings. Optional. *** ## Advanced Configuration ### ReactFlow props JSON **Type:** `text` Advanced: JSON object with React Flow component props for custom configuration. Overrides default settings. Example: {"fitView": true, "panOnDrag": false} *** ### MiniMap props JSON **Type:** `text` Advanced: JSON object with MiniMap component props for custom configuration. Example: {"nodeColor": "#ff0000", "maskColor": "rgba(0,0,0,0.1)"} *** ### Controls props JSON **Type:** `text` Advanced: JSON object with Controls component props for custom configuration. Example: {"showZoom": true, "showFitView": false, "showInteractive": true} *** ### Background props JSON **Type:** `text` Advanced: JSON object with Background component props for custom configuration. Example: {"gap": 12, "size": 1, "color": "#f1f1f1"} *** ### Debug to console **Type:** `boolean` When enabled, outputs the constructed ReactFlow properties and nodes/edges JSONs to the browser console. Useful for advanced users to see current settings and construct reactFlowPropsJSON values. Check browser dev tools console. *** ### Custom CSS **Type:** `text` Custom CSS styles for advanced appearance customization. You can use placeholder {ELEMENT\_ID} that will be replaced with the plugin element ID that we recommend to use since the styles are appended to the page styles globally. See the demo for examples and reference. **Example:** ```css #{ELEMENT_ID} .react-flow__node { font-size: 16px; border: 2px solid #333; } ``` *** --- # 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/element-reference/fields.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.