Skip to content
Flowinger

Flowinger

A small, dependency-free node-graph renderer for React. HTML nodes over SVG edges, with pan, zoom, drag and connect — and an API shaped like React Flow’s.
Get startedLive demoComing from React Flow

Install

Section titled “Install”
Terminal window
npm install flowinger

React 18 or 19 is the only peer dependency. There is no stylesheet to import. The package ships ESM, CommonJS and TypeScript declarations.

Try it

Section titled “Try it”
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Scan orders
Filter: paid
Join customers
Sort by total

Drag a node, draw an edge from a handle to another, select one and press Backspace. This page rendered the diagram on the server; the code is in Getting started.

Why Flowinger

Section titled “Why Flowinger”

Small, and only what you use

The core is about 19.6 kB gzipped. Drag, connect, selection and the rest are opt-in features that add only their own code, so the whole canvas is about 35.4 kB. Features →

No dependencies

react and react-dom are the only peers. Plain DOM, SVG and CSS variables; no stylesheet to import. Theming →

An API you already know

React Flow’s names for components, hooks, props, class names and types — all 211 of its exports, measured from its own type declarations. Coverage →

The “pro” extras, free

Undo/redo, copy and paste, snap guides, export, smart edges, flowchart shapes and a collapsible tree, each its own entry point. Pro modules →

Server rendering that works

Renders and hydrates on React 18 and 19, with the first paint already framed. Server rendering →

Fast at 10,000 nodes

Mounts 10,000 nodes in 0.6 s against React Flow’s 1.3 s, and pans them in a quarter of the time without culling. Benchmarks →

Flowinger and React Flow

Section titled “Flowinger and React Flow”
Flowinger React Flow (@xyflow/react 12)
Runtime dependencies 0 3 direct, plus d3-zoom, d3-drag, d3-selection…
Stylesheet to import None (CSS variables) @xyflow/react/dist/style.css
Diagram chunk in a real app (QueryLens) 19.0 kB gzipped 60.5 kB gzipped
Mount 10,000 nodes 0.6 s 1.2 s
Mount 10,000 nodes, culled 55 ms 594 ms
Undo/redo, copy-paste, snap lines, export, smart edges Free, separate entry points React Flow Pro (paid)
Ecosystem, examples, answers online Small and new Large and mature

The full table, with panning and zooming culled and not, is in the benchmarks.

Next

Section titled “Next”
Getting startedInstall, a first diagram, making it interactive.
Migrating from React FlowThe defaults that differ, and what to do instead.
API referenceCanvas props, nodes and edges, handles, the instance.
ExamplesLayouts, an editor, export, JSON, swimlanes, multiplayer, a stepper, a tree and Next.js.