Updating Nodes

In Flow, nodes are strictly reactive. This means when you modify the objects within the nodes array prop (such as changing coordinates, styles, labels, or business metadata), the canvas viewport synchronizes instantly. No manual refresh() or render() calls are required.

Live Property Binding Demo

This example shows how to dynamically bind a node's label and color to external form inputs. Select a node in the graph below to enable the edit panel.

Label:

Color:

➔ Select a node to begin editing

Node A

Node B

Reactive Property Update

Implementation Best Practices

1. State Management: For performance reasons, yh-flow avoids costly deep watches on large arrays. To trigger reactivity, you must replace the entire parent array or object reference (immutable updates). Example: nodes.value = nodes.value.map(n => n.id === id ? { ...n, data: { ...n.data, label: 'Value' } } : n).
2. Position Shift: To programmatically move nodes (e.g., for auto-layout or alignment), supply a new array with updated node positions.
3. High-Frequency Updates: For large-scale graphs with thousands of nodes, we expose the internal flowInstance.updateNode(nodeId, data) method for highly frequent, granular property modifications to bypass full array diffing and Vue app-level re-rendering overhead.