React Graph and Tree Visualization Libraries Compared

When building React applications that need to display connected data — whether it's company hierarchies, workflow diagrams, or network graphs — choosing the right visualization library matters. Each of these four packages (react-d3-tree, react-flow-renderer, react-graph-vis, react-organizational-chart) solves similar problems but with different trade-offs. Let's break down how they actually work in practice.

🌳 Tree Structure Support: Hierarchical vs Free-Form

react-d3-tree renders strict parent-child tree structures with automatic layout.

import Tree from 'react-d3-tree';

const data = {
  name: 'CEO',
  children: [
    {
      name: 'CTO',
      children: [
        { name: 'Developer' },
        { name: 'Designer' }
      ]
    },
    {
      name: 'CFO',
      children: [{ name: 'Accountant' }]
    }
  ]
};

<Tree data={data} orientation="vertical" />;

react-flow-renderer treats everything as free-form nodes with optional connections.

import ReactFlow from 'react-flow-renderer';

const nodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'CEO' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: 'CTO' } }
];

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

<ReactFlow nodes={nodes} edges={edges} />;

react-graph-vis uses network graph data format with nodes and edges arrays.

import { Graph } from 'react-graph-vis';

const graph = {
  nodes: [
    { id: 1, label: 'CEO' },
    { id: 2, label: 'CTO' }
  ],
  edges: [
    { from: 1, to: 2 }
  ]
};

const options = { layout: { hierarchical: { enabled: true } } };

<Graph graph={graph} options={options} />;

react-organizational-chart provides pre-built org chart components with nested children.

import { OrganizationChart } from 'react-organizational-chart';

<OrganizationChart label="CEO">
  <OrganizationChart label="CTO">
    <OrganizationChart label="Developer" />
    <OrganizationChart label="Designer" />
  </OrganizationChart>
  <OrganizationChart label="CFO">
    <OrganizationChart label="Accountant" />
  </OrganizationChart>
</OrganizationChart>;

🎨 Custom Node Rendering: Fixed vs Flexible

react-d3-tree allows custom node HTML through render props but keeps tree layout fixed.

import Tree from 'react-d3-tree';

const renderCustomNode = ({ nodeDatum }) => (
  <foreignObject width={150} height={40}>
    <div className="custom-node">
      <strong>{nodeDatum.name}</strong>
    </div>
  </foreignObject>
);

<Tree data={data} renderCustomNodeElement={renderCustomNode} />;

react-flow-renderer gives full control over node appearance and behavior.

import ReactFlow, { useNodesState } from 'react-flow-renderer';

const CustomNode = ({ data }) => (
  <div className="custom-node">
    <div className="avatar">{data.avatar}</div>
    <div className="label">{data.label}</div>
    <button onClick={data.onAction}>Action</button>
  </div>
);

const nodeTypes = { custom: CustomNode };

<ReactFlow nodeTypes={nodeTypes} nodes={nodes} />;

react-graph-vis supports custom node styling through vis.js options.

import { Graph } from 'react-graph-vis';

const graph = {
  nodes: [
    {
      id: 1,
      label: 'CEO',
      shape: 'image',
      image: '/avatar.png',
      font: { size: 16, color: '#000' }
    }
  ],
  edges: [{ from: 1, to: 2 }]
};

const options = {
  nodes: {
    shape: 'box',
    color: { background: '#97C2FC' }
  }
};

<Graph graph={graph} options={options} />;

react-organizational-chart allows custom node content through children prop.

import { OrganizationChart } from 'react-organizational-chart';

<OrganizationChart
  label="CEO"
  nodeContent={
    <div className="org-node">
      <img src="/avatar.png" alt="CEO" />
      <span>John Smith</span>
    </div>
  }
>
  <OrganizationChart label="CTO" />
</OrganizationChart>;

🔗 Edge and Connection Handling

react-d3-tree automatically draws edges between parent and child nodes.

import Tree from 'react-d3-tree';

// Edges are implicit in the tree structure
const data = {
  name: 'Root',
  children: [
    { name: 'Child 1' },
    { name: 'Child 2' }
  ]
};

<Tree
  data={data}
  pathFunc="step"
  translate={{ x: 500, y: 200 }}
/>;

react-flow-renderer supports multiple edge types with custom styling.

import ReactFlow from 'react-flow-renderer';

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'smoothstep',
    style: { stroke: '#2563eb', strokeWidth: 2 },
    label: 'Reports To'
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    type: 'bezier',
    animated: true
  }
];

<ReactFlow edges={edges} />;

react-graph-vis provides physics-based edge rendering with arrows and labels.

import { Graph } from 'react-graph-vis';

const graph = {
  nodes: [{ id: 1, label: 'A' }, { id: 2, label: 'B' }],
  edges: [
    {
      from: 1,
      to: 2,
      arrows: 'to',
      label: 'Connection',
      color: { color: '#848484', highlight: '#848484' }
    }
  ]
};

<Graph graph={graph} options={{ edges: { smooth: true } }} />;

react-organizational-chart draws connecting lines automatically between nested components.

import { OrganizationChart } from 'react-organizational-chart';

// Lines are drawn automatically between parent and child
<OrganizationChart label="Manager" lineColor="#2563eb" lineWidth={2}>
  <OrganizationChart label="Employee 1" />
  <OrganizationChart label="Employee 2" />
</OrganizationChart>;

🖱️ User Interaction: Read-Only vs Editable

react-d3-tree focuses on viewing with zoom, pan, and node collapse.

import Tree from 'react-d3-tree';

<Tree
  data={data}
  zoomable={true}
  translate={{ x: 500, y: 200 }}
  onNodeClick={(nodeData) => {
    console.log('Node clicked:', nodeData);
  }}
  collapsible={true}
/>;

react-flow-renderer built for editing with drag, drop, and connection creation.

import ReactFlow, {
  useNodesState,
  useEdgesState,
  addEdge
} from 'react-flow-renderer';

function FlowEditor() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      connectionLineType="smoothstep"
      fitView
    />
  );
}

react-graph-vis supports manipulation mode for adding/moving nodes.

import { Graph } from 'react-graph-vis';

const options = {
  manipulation: {
    enabled: true,
    addNode: function (data, callback) {
      data.label = prompt('Enter node label');
      callback(data);
    },
    editEdge: true,
    deleteNode: true,
    deleteEdge: true
  },
  physics: { enabled: true }
};

<Graph graph={graph} options={options} getNetwork={(network) => {
  // Access vis.js network instance for advanced control
}} />;

react-organizational-chart primarily read-only with expand/collapse.

import { OrganizationChart } from 'react-organizational-chart';

<OrganizationChart
  label="CEO"
  onNodeClick={(node) => {
    console.log('Org node clicked:', node);
  }}
  collapsible={true}
>
  <OrganizationChart label="CTO" collapsed={false}>
    <OrganizationChart label="Developer" />
  </OrganizationChart>
</OrganizationChart>;

📐 Layout and Positioning

react-d3-tree uses D3's tree layout algorithm with automatic spacing.

import Tree from 'react-d3-tree';

<Tree
  data={data}
  orientation="vertical"
  separation={{ siblings: 1, nonSiblings: 2 }}
  translate={{ x: 400, y: 100 }}
  scaleExtent={{ min: 0.5, max: 2 }}
/>;

react-flow-renderer requires manual positioning or auto-layout libraries.

import ReactFlow from 'react-flow-renderer';
import { useLayoutNodes } from '@reactflow/core';

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

// Or use auto-layout library like dagre
<ReactFlow nodes={nodes} fitView />;

react-graph-vis offers multiple layout algorithms including physics and hierarchical.

import { Graph } from 'react-graph-vis';

const options = {
  layout: {
    hierarchical: {
      enabled: true,
      direction: 'UD',
      sortMethod: 'hubsize',
      levelSeparation: 150,
      nodeSpacing: 100
    }
  },
  physics: {
    enabled: false // Disable for stable hierarchical layout
  }
};

<Graph graph={graph} options={options} />;

react-organizational-chart uses fixed vertical/horizontal spacing.

import { OrganizationChart } from 'react-organizational-chart';

<OrganizationChart
  label="Root"
  lineColor="#ccc"
  lineWidth={2}
  nodeSpacing={50}
  verticalSpacing={80}
>
  <OrganizationChart label="Child 1" />
  <OrganizationChart label="Child 2" />
</OrganizationChart>;

⚠️ Package Status and Maintenance

react-d3-tree remains actively maintained with regular updates. The API is stable and well-documented. Suitable for production use in tree visualization scenarios.

react-flow-renderer has been rebranded to reactflow (package: @xyflow/react). The old package name still works but new projects should use the updated name. Check migration guides when starting fresh.

// Old (still works)
import ReactFlow from 'react-flow-renderer';

// New (recommended)
import ReactFlow from '@xyflow/react';

react-graph-vis wraps vis.js, which has seen reduced maintenance activity. The React wrapper itself receives occasional updates but depends on vis.js stability. Evaluate long-term support needs before committing to large projects.

react-organizational-chart is a smaller, focused library with less frequent updates. Works well for simple org charts but may lack features for complex requirements. Consider if your needs might outgrow its capabilities.

🌱 When Not to Use These Libraries

These visualization tools excel in their niches, but consider alternatives when:

• You need high-performance rendering for 1000+ nodes: Look into canvas-based solutions like react-konva or WebGL libraries
• You require real-time collaborative editing: Consider specialized libraries like tldraw or build custom solutions
• Your data is simple enough for basic lists or tables: Don't add visualization complexity unnecessarily
• You need mobile-first touch interactions: Test thoroughly as some libraries have limited mobile support

📌 Summary Table

💡 Final Recommendation

Think about your data structure and user needs first:

• Strict parent-child hierarchy with viewing focus? → react-d3-tree
• Interactive diagram editor with custom nodes? → react-flow-renderer (or @xyflow/react)
• Network graphs with many-to-many relationships? → react-graph-vis
• Company org charts with minimal setup? → react-organizational-chart

Important Note: For new projects requiring node-based editing, prefer @xyflow/react over react-flow-renderer as it's the actively maintained version. The core API remains similar but benefits from ongoing development.

All four libraries can produce professional results when matched to the right use case. The key is understanding whether you need strict hierarchy, free-form layouts, network visualization, or purpose-built org charts before making your choice.