> 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/states.md). # States ## Summary ### Element states | Name | Type | Summary | | ------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [nodes JSON](#nodes-json) | `text` | All nodes currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance. | | [edges JSON](#edges-json) | `text` | All edges (connections) currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance. | | [updated nodes IDs](#updated-nodes-ids) | `list` | List of IDs of nodes that were moved in the last position change event. Use with node changed position event to get all nodes that moved together. | | [updated nodes Xs](#updated-nodes-xs) | `list` | List of new X coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID. | | [updated nodes Ys](#updated-nodes-ys) | `list` | List of new Y coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID. | | [removed nodes IDs](#removed-nodes-ids) | `list` | List of IDs of nodes that were deleted in the last node removal event. Use with node removed event to get all nodes that were deleted together. | | [added edge source](#added-edge-source) | `text` | ID of the source node for the edge that was created in the last edge addition event. Use with edge added event to get edge details. | | [added edge target](#added-edge-target) | `text` | ID of the target node for the edge that was created in the last edge addition event. Use with edge added event to get edge details. | | [removed edges IDs](#removed-edges-ids) | `list` | Array of edge IDs that were deleted in the last edge removal event. Use with edge removed event to get edge details. | | [removed edges sources](#removed-edges-sources) | `list` | Array of source nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details. | | [removed edges targets](#removed-edges-targets) | `list` | Array of target nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details. | | [clicked node ID](#clicked-node-id) | `text` | ID of the node that was clicked in the last node click event. Use with node clicked event to identify which node was selected. | | [clicked edge ID](#clicked-edge-id) | `text` | ID of the edge that was clicked in the last edge click event. Use with edge clicked event to identify which edge was selected. | | [selected nodes IDs](#selected-nodes-ids) | `list` | List of IDs of all currently selected nodes. Updates automatically when selection changes. | | [selected edges IDs](#selected-edges-ids) | `list` | List of IDs of all currently selected edges. Updates automatically when selection changes. | | [mouse flow X](#mouse-flow-x) | `number` | Current X coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop. | | [mouse flow Y](#mouse-flow-y) | `number` | Current Y coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop. | | [dropped edge source ID](#dropped-edge-source-id) | `text` | ID of the source node when an edge is dropped on the canvas without connecting to a target. Use with edge dropped on canvas event to handle node creation on edge drop. | *** ## Element states ### nodes JSON **Type:** `text` All nodes currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance. *** ### edges JSON **Type:** `text` All edges (connections) currently in the React Flow chart as JSON text. Updated only when "Export to JSON" action is triggered for optimal performance. *** ### updated nodes IDs **Type:** `list` List of IDs of nodes that were moved in the last position change event. Use with node changed position event to get all nodes that moved together. *** ### updated nodes Xs **Type:** `list` List of new X coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID. *** ### updated nodes Ys **Type:** `list` List of new Y coordinates for nodes that were moved in the last position change event. Corresponds to the same index in updated nodes ID. *** ### removed nodes IDs **Type:** `list` List of IDs of nodes that were deleted in the last node removal event. Use with node removed event to get all nodes that were deleted together. *** ### added edge source **Type:** `text` ID of the source node for the edge that was created in the last edge addition event. Use with edge added event to get edge details. *** ### added edge target **Type:** `text` ID of the target node for the edge that was created in the last edge addition event. Use with edge added event to get edge details. *** ### removed edges IDs **Type:** `list` Array of edge IDs that were deleted in the last edge removal event. Use with edge removed event to get edge details. *** ### removed edges sources **Type:** `list` Array of source nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details. *** ### removed edges targets **Type:** `list` Array of target nodes IDs of the edges that were deleted in the last edge removal event. Use with edge removed event to get edge details. *** ### clicked node ID **Type:** `text` ID of the node that was clicked in the last node click event. Use with node clicked event to identify which node was selected. *** ### clicked edge ID **Type:** `text` ID of the edge that was clicked in the last edge click event. Use with edge clicked event to identify which edge was selected. *** ### selected nodes IDs **Type:** `list` List of IDs of all currently selected nodes. Updates automatically when selection changes. *** ### selected edges IDs **Type:** `list` List of IDs of all currently selected edges. Updates automatically when selection changes. *** ### mouse flow X **Type:** `number` Current X coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop. *** ### mouse flow Y **Type:** `number` Current Y coordinate of the mouse cursor in flow coordinate space. Useful for creating nodes using drag & drop. *** ### dropped edge source ID **Type:** `text` ID of the source node when an edge is dropped on the canvas without connecting to a target. Use with edge dropped on canvas event to handle node creation on edge drop. ***