Components

<Background />

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

<BaseEdge />

The BaseEdge component is used internally by all the built-in edges and can be used inside a custom edge. It handles the invisible interaction path and the edge label.

<ControlButton />

The ControlButton component adds a button to the Controls panel, styled to match the built-in zoom and fit-view buttons.

<Controls />

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

<EdgeLabelRenderer />

The EdgeLabelRenderer lets you render edge labels as regular HTML (instead of SVG) in a single container above the edges, so labels can be interactive.

<EdgeText />

The EdgeText component renders a label with an optional background at a given position. It is used by BaseEdge to draw edge labels.

<EdgeToolbar />

The EdgeToolbar component renders a toolbar positioned on an edge — the edge counterpart to NodeToolbar, handy for per-edge actions.

<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 />

The NodeResizeControl component renders a single resize control, so you can place and style resize handles individually.

<NodeResizer />

The NodeResizer component renders draggable controls around a node so users can resize it.

<NodeToolbar />

The NodeToolbar component renders a toolbar attached to a node — handy for per-node actions or a tooltip.

<Panel />

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