Vertical flow example - Rete.js

Vertical flow

The given example illustrates a vertically oriented editor. It has been achieved by making subtle changes to nodes and connections, specifically:

  • using a custom node component with modified structure and some styles.
  • adjusting connection junction points with sockets.
  • changing the connection path to a vertical orientation.
  • modifying port placement points in the arrangement.

The actual example is built using React.js, but around 75% of the listed changes are stack-agnostic. This means that to utilize them in Angular, Vue.js, Svelte, or Lit, you'll need to create a corresponding custom component. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.