Building Node-Based UIs That Don't Suck: Meet xyflow

If you've ever tried to build a node editor in React or Svelte, you know the pain. You start with a vision of drag-and-drop nodes, edges connecting them, and a canvas that feels alive. Then you hit the real world: performance bottlenecks, wonky zooming, and customization that feels like fighting the library instead of using it.

xyflow is the project that might make you stop rolling your own. It's a pair of UI libraries — one for React, one for Svelte — that let you build interactive, customizable node-based interfaces without the usual misery.

What It Does

xyflow is a toolkit for rendering and manipulating node graphs. Think workflow builders, data pipeline editors, flowcharts, or even AI model architecture diagrams. It handles the hard parts:

• Rendering nodes and edges on an infinite canvas
• Pan and zoom (smooth, performant)
• Drag and drop, with automatic edge snapping
• Custom nodes and edges, fully controlled by you
• Events for selection, connection, and updates

You get a <ReactFlow /> component (or SvelteFlow), feed it some nodes and edges, and it just works. But unlike many canned solutions, you're not locked into a fixed set of components. Every node can be a regular React or Svelte component, styled however you want.

Why It's Cool

The real magic is in the details. Here's what makes xyflow stand out:

Customization without limits. Most node editors give you a box with a title and ports. With xyflow, your nodes are just components. Want a node that renders a chart inside? Go for it. Need a node that transforms into a form when you double-click? Easy. The library doesn't dictate your UI.

Performance that scales. Node editors can choke when you throw a hundred nodes at them. xyflow uses a virtual canvas under the hood (based on the d3-zoom and panzoom patterns) so it stays smooth even with thousands of nodes. Edges are rendered as SVG paths that update gracefully as you move things around.

Svelte and React, done right. This project is built by the same folks who made react-flow (which has been around for years). The Svelte version (svelte-flow) came later but feels equally polished. No weird bridging or hacks — it's idiomatic for each framework.

Smart edge routing. When you connect nodes, edges automatically route around other nodes and handle bezier curves. If you want straight lines, step edges, or custom paths, that's also a prop away.

An active, growing ecosystem. The library has been used in production at companies like Stripe, Datadog, and Microsoft. There are plugins for minimaps, controls, and background grids. The documentation is actual docs, not auto-generated API dumps.

How to Try It

Getting started is dead simple. Choose your framework:

React:

npm install @xyflow/react

Then use it:

import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const nodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
  { id: '2', position: { x: 200, y: 0 }, data: { label: 'Process' } },
];

const edges = [
  { id: 'e1-2', source: '1', target: '2' },
];

export default function App() {
  return <ReactFlow nodes={nodes} edges={edges} />;
}

Svelte:

npm install @xyflow/svelte

Same idea, Svelte-flavored:

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';

  const nodes = [
    { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
    { id: '2', position: { x: 200, y: 0 }, data: { label: 'Process' } },
  ];

  const edges = [
    { id: 'e1-2', source: '1', target: '2' },
  ];
</script>

<SvelteFlow {nodes} {edges} />

That's it. You've got a working node editor. From there, you can dive into custom nodes, edge types, and interactivity. Check the demo on the GitHub repo for live examples.

Final Thoughts

xyflow is one of those rare libraries that makes you feel like the author actually used it themselves. It's not overengineered, but it's not barebones either. It strikes that sweet spot where you can start prototyping in five minutes and still have room to build something production-grade later.

If you're building anything with nodes and connections — a visual programming tool, a data mapping UI, a mind map — give this a shot. It's the kind of tool that makes you wonder why you ever tried to build one from scratch.

Follow us @githubprojects for more developer tools and open source finds.