The React diagram library with everything in the box

Node editors, flow charts, dashboards and ER diagrams as React components — with the parts other libraries sell or leave to you: obstacle-avoiding routing, ELK auto-layout, undo/redo, live collaboration and true vector export. MIT, no Pro tier. SSR-ready for Next.js.

npm install @grafloria/react @grafloria/renderer @grafloria/engine

Flow.tsx

import { GrafloriaFlow, useNodesState, useEdgesState } from '@grafloria/react';

function JobNode({ data }) {
  return <div className="job-card">{data.title}</div>;
}

export function Flow() {
  const [nodes, setNodes] = useNodesState([
    { id: 'a', type: 'job', custom: true, position: { x: 0, y: 0 }, data: { title: 'Extract' } },
    { id: 'b', position: { x: 240, y: 0 }, label: 'Load' },
  ]);
  const [edges, setEdges] = useEdgesState([{ source: 'a', target: 'b' }]);
  return (
    <GrafloriaFlow
      nodes={nodes} onNodesChange={setNodes}
      edges={edges} onEdgesChange={setEdges}
      nodeTypes={{ job: JobNode }}
      layout="elk" />
  );
}

live — the same engine this binding wraps, drag anything

rendering…

Why teams pick it

Components & hooks, the React way

Custom nodes are nodeTypes components with props; useNodesState/useEdgesState, useGrafloria, useSelection and useViewport hooks; controlled data end to end. StrictMode-clean.

Next.js & SSR, for real

The engine is headless — it runs in Node with no DOM. The React bindings ship SSR + hydration: render the diagram on the server, hydrate it interactive on the client. No dynamic(() => …, {ssr:false}) workarounds.

Everything in the box, MIT

Obstacle-avoiding orthogonal routing, ELK/dagre/force layout off-thread, command-based undo, per-property CRDT collaboration, SVG/PNG/PDF export — features that are Pro examples elsewhere are library code here.

Coming from React Flow?

React Flow is excellent and has the biggest community in this space — if you only need React and are happy assembling routing, layout, undo and collab from (often Pro) examples, it is a fine choice. Grafloria ships those as library features under MIT, and the same engine also runs in Angular, Vue and plain JS. The comparison page has the sourced, cell-by-cell table.

Every demo, in your framework

The gallery is the documentation: 111 runnable pages, each executed in CI with real pointer events — and each one available in this framework’s own idiom, source shown. React demos — every gallery page as real JSX →

Open the demos Get the packages

Grafloria is MIT — every feature, no commercial tier. React, Next.js, Angular, Vue, React Flow, Vue Flow, ngx-vflow, JointJS and Drawflow are trademarks of their respective owners; comparative references only, no affiliation implied. Corrections welcome via GitHub issues.