Custom Connections

Description

This example goes beyond a single custom connection type and shows how to build fully custom connections with your own rendering, routing, and interactive behavior. It is the right pattern when edges are a meaningful part of the product instead of a generic line between two nodes.

In advanced editors, connections can carry labels, validation state, routing rules, or domain-specific affordances. Once that happens, default edge presets often become too limited.

This page is useful for teams building graph products where connections are part of the user workflow, not just supporting visuals.

Example

When to use it

• Build domain-specific edges with custom visuals and logic.
• Add richer routing or interaction than built-in presets allow.
• Create graph interfaces where edge behavior is part of the product model.

If your editor needs custom edge drawing plus custom interaction, this example is the stronger starting point than simple styling changes.

Related docs

• Connection Component
• Connection Waypoints Component
• Custom Connection Type Example
• Connection Content Example