A new version of React Flow is out. With 12.8.3 you get a lot of bug fixes and a great improvement for handles. It’s now possible to position child content of a handle outside of the handle itself and still use it as a starting point for connections as you can see in this example:

Patch Changes

• #5428  Be able to use detached handle content as a starting point for a connection
• #5419  Make edge markers fallback to --xy-edge-stroke CSS variable when marker color is null
• #5453  Snap selection instead of separate nodes when snap grid is enabled
• #5444  Export MiniMapNode to use it for custom mini map nodes
• #5415  Allow strings and enums for marker types
• #5436  Prevent a 0 added to the markup for edges when interactionWidth is 0
• #5443  Use 1 as the default for interactive Minimap zoom step
• #5448  Use correct HandleConnection type for Handle onConnect
• #5420  Omit defaultValue from ’s to fix type incompatibility when using