@xyflow/system

Core system utilities powering React Flow and Svelte Flow.

Note: This package is designed as a shared vanilla utility layer for React Flow and Svelte Flow. It is not intended for use with unrelated libraries.

Installation

pnpm add @xyflow/system

What is this package?

@xyflow/system provides core, framework-agnostic helpers and types for building node-based editors and flow diagrams. It contains the logic and utilities that are shared between React Flow and Svelte Flow, such as edge path calculations, pan/zoom, node dragging, and more.

Features

Pan & Zoom (XYPanZoom): Utilities for adding interactive pan and zoom to your canvas.
Dragging (XYDrag): Helpers for node and selection dragging.
Handles/Connections (XYHandle): Logic for drawing and managing connection lines between nodes.
Minimap (XYMiniMap): Interactive minimap utilities for overview and navigation.
Edge Utilities: Functions for SVG edge path creation (bezier, straight, step, smoothstep, etc.).
Store Utilities: Helpers for managing and updating flow state.
DOM Utilities: Functions for DOM measurements and interactions.
Marker Utilities: Helpers for SVG markers on edges.
Graph Utilities: Functions for working with nodes, edges, and graph structure.
General Utilities: Miscellaneous helpers used throughout the system.
Types & Constants: Shared types, enums, and constants for consistent data structures.

Usage

You can import any utility, type, or helper directly from the package:

import { getBezierPath, getConnectedEdges, Position, XYPanZoom } from '@xyflow/system';

Example: Bezier Edge Path Creation

import { getBezierPath, Position } from '@xyflow/system';

const [path, labelX, labelY] = getBezierPath({
  sourceX: 0,
  sourceY: 20,
  sourcePosition: Position.Right,
  targetX: 150,
  targetY: 100,
  targetPosition: Position.Left,
});

API Reference

There is currently no dedicated API documentation for this package. For details on available utilities, types, and helpers, please refer to the source code or check out the React Flow documentation where we are documenting a lot of stuff from this package.