<ViewportPortal />

<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 (
        style={{ transform: 'translate(100px, 100px)', position: 'absolute' }}
        This div is positioned at [100, 100] on the flow.