Connector Inside Node

Description

This example shows how to place connectors inside a node instead of only on its outer border. That layout is useful when the node UI is dense and the connection point needs to sit next to a specific field, control, or logical slot.

It works especially well for builder-style interfaces where nodes contain forms, action rows, or embedded controls. In those cases, internal connector placement can make the relationship between a UI element and its connection point much clearer.

The main value is not visual novelty. It is better information architecture inside the node, which leads to cleaner routing and less confusion for users editing complex graphs.

Example

When to use it

• Build compact node UIs with form-like or slot-based layouts.
• Keep ports close to the data or action they represent.
• Reduce visual clutter on larger, more detailed nodes.

This is a practical pattern for workflow builders and internal tools where node layout carries real meaning.

Related docs

• Node Directive
• Node Input Directive
• Node Output Directive
• Connectable Side Example