# @xyflow/system

> xyflow core system that powers React Flow and Svelte Flow.

Latest version **0.0.82** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xyflow/system
pnpm add @xyflow/system
yarn add @xyflow/system
bun add @xyflow/system
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.82 |
| Published | 2026-09-01 |
| First published | 2023-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 677.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 38403 |
| Maintainers | peterkogo, webk1d |
| Keywords | node-based UI, graph, diagram, workflow, reactflow, svelteflow, xyflow |

## Links

- npm: https://www.npmjs.com/package/@xyflow/system
- Repository: https://github.com/xyflow/xyflow
- Homepage: https://github.com/xyflow/xyflow#readme
- Issues: https://github.com/xyflow/xyflow/issues
- npm.io page: https://npm.io/package/@xyflow/system

## Dependencies (9)

- [d3-drag](https://npm.io/package/d3-drag.md) ^3.0.0
- [d3-zoom](https://npm.io/package/d3-zoom.md) ^3.0.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0
- [@types/d3-drag](https://npm.io/package/@types/d3-drag.md) ^3.0.7
- [@types/d3-zoom](https://npm.io/package/@types/d3-zoom.md) ^3.0.8
- [d3-interpolate](https://npm.io/package/d3-interpolate.md) ^3.0.1
- [@types/d3-selection](https://npm.io/package/@types/d3-selection.md) ^3.0.10
- [@types/d3-transition](https://npm.io/package/@types/d3-transition.md) ^3.0.8
- [@types/d3-interpolate](https://npm.io/package/@types/d3-interpolate.md) ^3.0.4

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.0.82 (latest) — 2026-09-01
- 1.0.0-next.3 (next) — 2026-08-19
- 0.0.81 — 2026-08-25
- 1.0.0-next.2 — 2026-08-18
- 1.0.0-next.1 — 2026-08-12
- 0.0.80 — 2026-08-12
- 1.0.0-next.0 — 2026-08-11
- 0.0.79 — 2026-07-06
- 0.0.78 — 2026-06-22
- 0.0.77 — 2026-06-01
- 0.0.76 — 2026-03-27
- 0.0.75 — 2026-02-19
- 0.0.74 — 2025-12-04
- 0.0.73 — 2025-11-13
- 0.0.72 — 2025-10-28
- … 71 more at https://npm.io/package/@xyflow/system/versions

## README

# @xyflow/system

Core system utilities powering [React Flow](https://reactflow.dev) and [Svelte Flow](https://svelteflow.dev).

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

```sh
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:

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

### Example: Bezier Edge Path Creation

```ts
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](./src) or check out the [React Flow documentation](https://reactflow.dev/api-reference/) where we are documenting a lot of stuff from this package.

## Contributing

See the main [xyflow repository](https://github.com/xyflow/xyflow) for contribution guidelines.

---
_Source: https://npm.io/package/@xyflow/system · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._