$ show xyflow/xyflow
Monorepo for node-based graph/flow editor libraries. Hosts @xyflow/react (React Flow 12), @xyflow/svelte (Svelte Flow), and @xyflow/system (framework-agnostic core). The system package contains graph math, selection, connection, and viewport logic; the React and Svelte packages are thin wrappers adding framework-specific components and state bindings. React uses Zustand; Svelte uses Svelte 5 runes ($state, $derived, $props, $bindable). Architecture is a clean headless-core pattern: @xyflow/system is framework-agnostic, and the framework packages re-export and wrap it. Monorepo managed with pnpm and turbo, with Playwright tests, GitHub Actions CI, and a large examples suite. Actively maintained with frequent releases. Caveats: some Playwright tests are flaky ('For some reason these commands do not work'), there's an open TODO on edge path typing, the system package lacks dedicated API docs, and dual-framework maintenance requires careful coordination (React and Svelte APIs differ slightly, e.g., multiSelectionKeyCode vs multiSelectionKey). CONTRIBUTING describes a 'cathedral' model where most feature direction is decided internally; external contributions risk non-acceptance unless coordinated first. Overall a high-quality, production-grade library. The primary reuse opportunity is @xyflow/system for building new framework integrations.
The LLM identified 2 files worth highlighting for reuse:
Entry point for @xyflow/system, the framework-agnostic core shared by the React and Svelte wrappers. Contains graph math, node/edge selection, connection handling, and viewport transforms. This is the most reusable asset in the repo: a standalone package that could power new framework integrations (Vue, Angular, Solid) with minimal modification. Demonstrates the headless UI core pattern where framework-specific code is a thin adapter over shared logic.
Main Svelte 5 entry component using modern runes ($state, $derived, $props with generics, $bindable). Demonstrates how a thin framework wrapper delegates to a shared system core. Useful as a reference for Svelte 5 library authors, though tightly coupled to @xyflow/system. The use of generics in Svelte components (NodeType extends Node, EdgeType extends Edge) is non-obvious and well-executed.