Components

<Background />

The Background component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.

<BaseEdge />

The BaseEdge component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.

<ControlButton />

The ControlButton component is used to render custom/ additional buttons for the Controls component.

<Controls />

The Controls component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

<EdgeLabel />

The Edge Label component can be used to add labels to edges.

<EdgeReconnectAnchor />

The EdgeReconnectAnchor component is used to create a reconnection point on your custom edges.

<Handle />

The Handle component is used in your custom nodes to define connection points.

<MiniMap />

The MiniMap component renders an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.

<NodeResizeControl />

To create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).

<NodeResizer />

The NodeResizer component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.

<NodeToolbar />

The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.

<Panel />

The Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.

The 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