Skip to main content

Graph View

Visualize component relationships and dependencies as an interactive graph.

Overview​

The Graph View component displays your React component tree and data flow as an interactive, visual graph.

API​

import { GraphView } from 'react-dev-debugger/ui';

<GraphView
  layout="hierarchical" // or "force-directed", "circular"
  showProps={true}
  showState={true}
  showContext={true}
  onNodeClick={(node) => console.log(node)}
  onEdgeClick={(edge) => console.log(edge)}
/>

Basic Example​

import { GraphView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <div>
      <h2>Component Graph</h2>
      <GraphView
        layout="hierarchical"
        showProps={true}
      />
    </div>
  );
}

Features​

  • Multiple Layouts: Hierarchical, force-directed, circular
  • Interactive Nodes: Click to inspect components
  • Data Flow: Visualize prop and state flow
  • Zoom & Pan: Navigate large graphs
  • Filtering: Show/hide specific components
  • Performance Highlights: Identify slow components

Layout Options​

Live Playground​

Graph Controls

Nodes: 8Edges: 7

Component Graph

rendersrendersrendersrendersrendersusesreceivesAppHeaderMainSidebarCounterTodoListcount:theme:
Component
State
Props

GraphView Usage Example

import { GraphView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <GraphView
      layout="hierarchical"
      showProps={true}
      showState={true}
      showContext={true}
      onNodeClick={(node) => console.log('Clicked:', node)}
      onEdgeClick={(edge) => console.log('Edge:', edge)}
      zoom={1}
    />
  );
}

Hierarchical Layout​

Best for parent-child relationships:

<GraphView
  layout="hierarchical"
  direction="top-to-bottom" // or "left-to-right"
  levelSeparation={100}
/>

Force-Directed Layout​

Best for complex relationships:

<GraphView
  layout="force-directed"
  strength={-300}
  distance={150}
/>

Next Steps​