vis-network

vis-network renders interactive network (graph) visualizations directly in the browser using HTML canvas. Nodes and nodes are driven by a physics-based layout engine — Barnes-Hut and repulsion solvers, force-atlas-style layouts, and hierarchical layouts — so a diagram of connected data organizes itself and stays responsive as the user drags, zooms, or edits it.

It is built for real interactivity rather than a static image: nodes and edges can be selected, dragged, clustered, or edited live, and the library exposes a broad event system (click, hover, drag, zoom, context menu) so an application can react to user manipulation of the graph. A built-in clustering system lets very large graphs collapse related nodes into single cluster nodes on demand, keeping thousands of nodes and edges navigable rather than a solid mass of lines.

As part of the vis.js family, it pairs with vis-data for reactive DataSets so a graph updates live as the underlying node/edge data changes, and it ships both an ESM/CJS module build for bundlers and a fully bundled standalone build that can be dropped in via a plain <script> tag with no build step. It also parses DOT and Gephi (.gexf) graph formats directly, so existing graph data from Graphviz or Gephi can be loaded with no custom conversion code.

What You Get

• A canvas-rendered network view with pan, zoom, drag, and click/hover event handling built in
• A configurable physics engine (Barnes-Hut, repulsion, force-atlas-2-based, hierarchical) that auto-arranges nodes and edges
• Clustering support that collapses groups of nodes into a single node for graphs with thousands of elements
• Built-in DOT and Gephi (.gexf) format parsers for importing existing graph data
• Live editing support (add/remove/connect nodes and edges) via an optional on-canvas manipulation toolbar
• Both a modular ESM/CJS build for bundlers and a dependency-free standalone UMD build for direct <script> use

Common Use Cases

• Visualizing dependency graphs, org charts, or entity-relationship diagrams that need to stay legible as they grow
• Building interactive network-exploration tools where users drag, cluster, and drill into nodes
• Rendering knowledge graphs or graph-database query results (e.g. from Neo4j or RDF stores) in a web UI
• Displaying infrastructure or system topology diagrams that update live as node/edge data changes
• Loading and visualizing existing Graphviz DOT files or Gephi exports without a separate conversion step

Under The Hood

Architecture The library is organized as a central Network constructor (lib/network/Network.js) that owns a shared body object — the single source of truth for node/edge state, DOM container, event emitter, and view transform — and wires together a set of focused modules under lib/network/modules/ (Canvas, CanvasRenderer, PhysicsEngine, LayoutEngine, NodesHandler, EdgesHandler, InteractionHandler, SelectionHandler, Clustering, ManipulationSystem, View). Each module receives the shared body and registers its own event listeners, so responsibilities (physics simulation, rendering, hit-testing, clustering) stay decoupled while still operating on one consistent state object; changing the core body contract would ripple through every module.

Tech Stack The project is TypeScript/JavaScript (mixed .ts and legacy .js source under lib/), built with Rollup and published as dual ESM/CJS/UMD bundles via peer (with vis-data/vis-util as externals) and standalone (fully bundled) output targets. It depends on component-emitter for its event system, @egjs/hammerjs for gesture/touch input, keycharm for keyboard shortcuts, and declares vis-data/vis-util as peer dependencies for its DataSet and shared-utility layer.

Code Quality Testing is comprehensive and multi-layered: unit tests run via Mocha across dozens of .test.ts/.test.js files covering the DOT/Gephi parsers, layout engine, edge geometry, locale utilities, and configuration options, plus Cypress end-to-end and visual-regression suites (test:e2e:functional, test:e2e:visual) that snapshot rendered canvas output. tsconfig.json enables strict mode for the TypeScript portions, and linting runs through oxlint with a shared config plus Prettier-equivalent formatting via oxfmt, enforced in CI. Error handling favors explicit thrown errors (e.g. requiring new on the constructor) over silent failure.

What Makes It Unique Unlike most charting libraries, vis-network treats the graph as a live, physics-simulated object rather than a static render: its layout engine continuously resolves node positions via configurable force/hierarchical solvers, and its clustering system lets a UI collapse and re-expand parts of a graph interactively rather than just rendering a fixed layout. Native DOT and Gephi import, combined with a dependency-free standalone bundle, gives it a reach — from data-science graph exports to plain <script>-tag pages — that most modern visualization libraries built only for bundler ecosystems don’t cover.