Elkjs Multiple Handles

This example demonstrates how to configure elkjs (opens in a new tab) to use specific handles (called 'ports' in elkjs). This is helpful to reduce edge crossings and have more control over the layout. The important things to configure are unique ids for the handles / ports, the actual ports for elkjs with a correct side property and 'org.eclipse.elk.portConstraints' : 'FIXED_ORDER' for all nodes.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}