Introduction

netiPlot is a canvas-based network visualization library for React and vanilla JavaScript.

What it does

netiPlot renders directed and undirected graphs on layered HTML5 canvases with a request-animation-frame driven render loop. It supports:

• Pan, zoom, and drag interactions
• Hover tooltips (React renderer or HTML callback)
• Background shapes with resize handles
• Node and shape image support
• Custom node and shape drawing functions
• Pluggable layout algorithms (force, hierarchical, custom)
• Viewport culling for large graphs

Two entry points

// React component
import { NetiPlotReact } from '@jonmodell/netiplot'

// Vanilla JS class
import { NetiPlot } from '@jonmodell/netiplot/vanilla'

Both entry points share the same core engine and accept the same graph data format. The React component is driven by props and re-renders via useSyncExternalStore. The vanilla class exposes an imperative API.

Installation

npm install @jonmodell/netiplot