agentic-dev/docs/library-decisions/2026-07-12-@xyflow/react.md

package, version, tier, decision, date, deciders, adr, lastRevalidated, is-sub-processor, processes-pii, filter-results, verification-commands, accepted-cves

package	version	tier	decision	date	deciders	adr	lastRevalidated	is-sub-processor	processes-pii	filter-results	verification-commands	accepted-cves
@xyflow/react	^12.0.0	feature	approved	2026-07-12	implementer-agent	null	null	false	false	license types maintenance boundary-fit shadow-check eu-residency cve-scan named-consumer socketRisk MIT native active pass pass n/a clean pass clean	npm info @xyflow/react license npm info @xyflow/react types cat package.json | grep -E '"(zod|inversify|payload|@trpc/server|superjson|reflect-metadata)"' npm info @xyflow/react time.modified npm info @xyflow/react time --json | tail -5 npm info @xyflow/react dependencies --json pnpm audit --audit-level=moderate 2>&1 | head -40 curl -s 'https://api.github.com/advisories?affects=%40xyflow%2Freact&per_page=10'

Filter: license

npm info @xyflow/react license returns MIT. The GitHub repository (xyflow/xyflow) confirms spdx_id: MIT. Within the allowlist.

Filter: types

Authored in TypeScript; the published manifest declares "types": "dist/esm/index.d.ts". No separate @types/ package is needed.

Filter: shadow-check

@xyflow/react (React Flow) is a node-based canvas/board component library. It does not duplicate any locked must-have (zod, inversify, payload, @trpc/server, superjson, reflect-metadata — root package.json grep matches only zod), and no other canvas or node-graph library exists in the workspace. Pass.

Filter: boundary-fit

Target is packages/editor (feature tier — the ADR-029 editor rebuild, seeded by the walking-skeleton PRD). @xyflow/react is a pure client-side React component library: it imports no @sentry/* or @opentelemetry/sdk-* modules (ADR-017 §4 unaffected), crosses no feature boundaries, and its transitive imports (classcat, an internal zustand@^4 store, @xyflow/system with the d3-drag/d3-zoom/d3-selection/d3-interpolate interaction modules) are all in-process UI libraries. ADR-006, ADR-010, ADR-017 all pass.

Filter: maintenance

Latest release 12.11.2 published 2026-07-06T12:42:54.957Z — six days before this trace. Release cadence is roughly monthly on the 12.x line (12.10.0 2025-12-04, 12.10.1 2026-02-19, 12.10.2 2026-03-27, 12.11.0 2026-06-01, 12.11.2 2026-07-06). The xyflow/xyflow monorepo was last pushed 2026-07-09, has ~37.6k stars and 127 open issues, and is commercially backed by xyflow GmbH. ~6.7M npm downloads/week. Active.

Filter: eu-residency

Pure in-browser rendering/interaction library. No vendor-controlled endpoints, no telemetry, no data transmission of any kind (React Flow Pro is a separate subscription for examples/support; the OSS package makes no network calls). Not applicable.

Filter: cve-scan

The GitHub Advisory Database reports zero advisories for @xyflow/react, @xyflow/system, classcat, and zustand. One transitive note: d3-interpolate depends on d3-color@1 - 3, which was historically affected by GHSA-36jr-mh4h-2g58 (ReDoS, patched >=3.1.0); the range resolves to 3.1.0 today, so fresh installs receive the patched version. pnpm audit --audit-level=moderate at the workspace root surfaces only pre-existing advisories in dev tooling (vitest via @stryker-mutator/vitest-runner, shell-quote via concurrently) — none related to this package. Clean relative to this adoption.

Filter: named-consumer

packages/editor — the walking-skeleton PRD (docs/work/prds/walking-skeleton.prd.md) specifies "React Flow board shell, one iframe frame node, canvas-protocol client (selection round-trip), minimal zustand store" as the first code of the ADR-029 editor rebuild. ADR-028 mandates the board architecture by construction ("React Flow frames containing live iframes"), and the platform-retrofit PRD explicitly batches this trace so walking-skeleton implementers do not stall on the ADR-022 pre-commit hook. The consumer is a scheduled, named package blocked today — not hypothetical.

Filter: socketRisk

The official Socket CLI requires an organization API token (socket package score fails with "requires a Socket API token"), which is unavailable in this environment, and socket.dev package pages are bot-gated (HTTP 403). Manual supply-chain audit performed instead.

@xyflow/react@12.11.2 runtime dependencies:

• classcat@^5.0.3 — zero-dependency classnames utility (Jorge Bucaran), MIT
• zustand@^4.4.0 — React Flow's internal store (Poimandres), zero-dependency apart from use-sync-external-store
• @xyflow/system@0.0.79 — same monorepo/publisher; depends on d3-drag, d3-zoom, d3-selection, d3-interpolate (Mike Bostock's D3 interaction modules) plus their @types/* packages

No preinstall/postinstall lifecycle scripts anywhere on the runtime path (classcat's prepare script runs only from a git checkout, not from the registry tarball). No network access, no obfuscation. Publisher xyflow GmbH has maintained the package continuously since the react-flow v9 era. Supply-chain risk assessed as clean.

Prompt: replaces

Nothing in the workspace is retired — no canvas or board library exists in the monorepo today. The founder's editor prototype (outside the repo, in the product bundle) already validated React Flow as the board substrate; ADR-029 rebuilds the editor under template conventions rather than vendoring it, so this adoption carries the prototype's proven substrate forward. What it displaces is the alternative of a hand-built pan/zoom/drag canvas — ADR-028 explicitly retires the prototype's hand-built NodeRenderer approach in favor of React Flow frames hosting live iframes.

Prompt: migration-cost-out

Hard. The board shell, frame nodes, viewport interactions, selection model, and canvas-protocol client will be written against React Flow's node/edge/viewport APIs, and the editor store's registry mirrors React Flow's coordinate model. Swapping the canvas engine at month 18 means rewriting packages/editor's board and interaction layer. Two containments keep it short of impossible: ADR-029's explicit view-model mapping layer keeps DesignDoc v1 (the persisted contract) independent of React Flow types, so no persisted data is coupled; and the dependency is confined to packages/editor — no other feature imports it. No vendor lock-in, no protocol coupling.

Prompt: alternatives-considered

1. tldraw SDK — purpose-built infinite-canvas SDK with excellent interaction polish. Auto-reject on filter 1: distributed under the tldraw license (watermark requirement or paid business license), outside the ADR-022 SPDX allowlist.
2. Hand-built canvas (inherit the prototype's NodeRenderer + custom pan/zoom) — ADR-028 names selection, hover, drag, hit-testing, and measurement across an origin boundary as "the hardest UI-architecture problem in the product"; rebuilding those primitives by hand duplicates years of React Flow's battle-testing for zero product differentiation, and ADR-028 already retires NodeRenderer from the board path.
3. react-konva / WebGL renderers — canvas-2D/WebGL scene graphs cannot host live DOM iframes inside frames, which ADR-028's iframe canvas requires by construction. Architecturally disqualified.
4. reaflow — React node-graph alternative, but ELK-auto-layout-centric with a far smaller community; wrong fit for a free-form design board with user-positioned frames.