<ViewportPortal />
Source on GitHub (opens in a new tab)
<ViewportPortal /> component can be used to add components to the same viewport of the flow where nodes and edges are rendered.
This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes & edges and are also
affected by zooming and panning
import React from 'react';
import { ViewportPortal } from '@xyflow/react';
export default function () {
return (
<ViewportPortal>
<div
style={{ transform: 'translate(100px, 100px)', position: 'absolute' }}
>
This div is positioned at [100, 100] on the flow.
</div>
</ViewportPortal>
);
}