Visualization

Customize layouts, interaction modes, and themes for your knowledge graph.

Visualization

InferaGraph renders your graph in 3D using WebGL and Three.js.

Force-Directed 3D

Physics-based layout using Barnes-Hut N-body simulation. Nodes repel via Coulomb force, edges attract via spring force, with damping and centering for stability.

Tree Layout

Static hierarchical layout. Auto-detects root nodes and positions children in balanced, centered subtrees. Ideal for genealogies.

Layout Modes

import { InferaGraph } from '@inferagraph/core';
import { useState } from 'react';

function App() {
  const [mode, setMode] = useState<'graph' | 'tree'>('graph');

  return (
    <>
      <button onClick={() => setMode('tree')}>Tree</button>
      <button onClick={() => setMode('graph')}>Graph</button>
      <InferaGraph data={data} layout={mode} />
    </>
  );
}

Theming

Every visual element is controlled via CSS custom properties. 

/* Your custom theme */
:root {
  --ig-bg-color: #09090b;
  --ig-node-color: #3b82f6;
  --ig-node-hover-color: #60a5fa;
  --ig-node-selected-color: #2563eb;
  --ig-edge-color: #27272a;
  --ig-label-color: #a1a1aa;
  --ig-label-font: 12px "Inter", sans-serif;
  --ig-tooltip-bg: #18181b;
  --ig-tooltip-color: #fafafa;
  --ig-panel-bg: #18181b;
  --ig-panel-color: #fafafa;
}

InferaGraph ships with a light and dark theme. Import either, or write your own.

Custom Node Rendering

Go beyond built-in styles with fully custom node visuals. Use a framework-agnostic render function for vanilla JS, Angular, or .NET apps, or pass a React component directly.

In vanilla JS, provide a renderNode function that receives a DOM container, the node data, and the current render state. In React, pass a component via component -- InferaGraph automatically wraps it using createReactNodeRenderFn under the hood. 

import { InferaGraph } from '@inferagraph/core';
import type { NodeComponentProps } from '@inferagraph/core';

function PersonNode({ node, isSelected, isHighlighted }: NodeComponentProps) {
  return (
    <div style={{
      padding: '8px 12px',
      background: isSelected ? '#3b82f6' : '#1e293b',
      borderRadius: 8,
      color: 'white',
      border: isHighlighted ? '2px solid #8b5cf6' : 'none',
    }}>
      {node.attributes.name || node.id}
    </div>
  );
}

<InferaGraph
  data={graphData}
  nodeRender={{ component: PersonNode }}
/>

API Reference

renderNode

takes priority over component

(container: HTMLElement, node: Node, state: NodeRenderState) => void | (() => void)

Framework-agnostic render function. Receives a DOM container to populate, the node data, and the current state. Return an optional cleanup function called before re-render or removal.

component

React.ComponentType<NodeComponentProps>

React component for custom node rendering. Automatically wrapped via createReactNodeRenderFn. Ignored when renderNode is also provided.

hitboxRadius

number (default: 20)

Invisible sphere radius (in pixels) used for mouse and touch interaction detection around the node.

NodeRenderState

{ isSelected: boolean, isHighlighted: boolean }

State object passed to both renderNode and React component renderers, reflecting the current selection and highlight status of the node.

Custom Tooltips

Customize how tooltips appear for nodes and edges. Use a framework-agnostic render function or pass a React component — same pattern as custom node rendering.

In vanilla JS, provide a renderTooltip function that receives a DOM element and tooltip data. In React, pass a component via component -- InferaGraph handles the rest. 

import { InferaGraph } from '@inferagraph/core';
import type { TooltipComponentProps } from '@inferagraph/core';

function BibleTooltip({ type, node, edge }: TooltipComponentProps) {
  if (type === 'node' && node) {
    return (
      <div style={{ padding: 8, background: '#1e293b', borderRadius: 6, color: 'white' }}>
        <div style={{ fontWeight: 600 }}>{node.attributes.name || node.id}</div>
        {node.attributes.era && <div style={{ fontSize: 12, opacity: 0.7 }}>{node.attributes.era}</div>}
      </div>
    );
  }
  if (type === 'edge' && edge) {
    return (
      <div style={{ padding: 6, background: '#1e293b', borderRadius: 6, color: 'white', fontSize: 12 }}>
        {edge.attributes.type}
      </div>
    );
  }
  return null;
}

<InferaGraph
  data={graphData}
  tooltip={{ component: BibleTooltip }}
/>

API Reference

renderTooltip

takes priority over component

(container: HTMLElement, data: TooltipData) => void | (() => void)

Framework-agnostic render function. Receives a DOM container to populate and structured tooltip data. Return an optional cleanup function called before re-render or removal.

component

React.ComponentType<TooltipComponentProps>

React component for custom tooltips. Ignored when renderTooltip is also provided.

TooltipData

{ type: 'node' | 'edge', node?: NodeData, edge?: EdgeData }

Data object passed to both renderTooltip and React component renderers, describing which element triggered the tooltip and its associated data.

showNode(node, x, y) / showEdge(edge, x, y)

TooltipOverlay instance methods

Programmatically show a tooltip for a specific node or edge at the given screen coordinates. Useful for triggering tooltips from external UI or keyboard navigation.