Labeled connections example - Rete.js

Labeled connections

Guide

You can add labels to connections by implementing a custom connection component. This approach provides you with full flexibility to customize and optimize this feature. All you need is:

  • create a custom connection component
  • calculate the position of the point relative to the path (start, middle, end)
  • display a text block at this position
  • create user-added connections with predefined labels
The source code for this Pro example is available only to subscribers
Get access

Although the example is built on React.js, you can easily adapt it for a different stack. To do so, simply copy certain modules from this example and substitute the custom connection component with one that matches your stack. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.