cytoscape.js

Cytoscape.js is a fully featured graph theory library for JavaScript. It provides both a graph theory model (nodes, edges, traversal, and a large library of graph algorithms) and an optional interactive renderer, so it can be used purely for server-side analysis in Node.js or to power a rich, interactive graph visualization UI in the browser.

Originated at the University of Toronto and published in Oxford Bioinformatics, it grew out of the need to model and visualize biological pathway data, but is general-purpose enough to be used for social networks, dependency graphs, knowledge graphs, and any other relational dataset. The library ships with a large collection of built-in graph algorithms (Dijkstra, A*, Bellman-Ford, Floyd-Warshall, PageRank, betweenness/closeness/degree centrality, k-means, Markov clustering, and more), a CSS-like styling system for nodes and edges, and an extension architecture that has produced 70+ community layout, UI, and export extensions.

Cytoscape.js is framework-agnostic and has no required dependencies, making it straightforward to drop into an existing web app or a headless analysis script alike.

What You Get

• A graph theory data model with nodes, edges, compound (nested) nodes, and a fluent selector/traversal API modeled after jQuery/D3-style chaining
• A built-in interactive Canvas renderer with pan, zoom, selection, gestures, and animation, usable without any other UI framework
• An extensive library of graph algorithms out of the box: Dijkstra, A*, Bellman-Ford, Floyd-Warshall, Kruskal, PageRank, centrality measures, and clustering (k-means, k-medoids, hierarchical, Markov, affinity propagation)
• A CSS-like stylesheet system for declaratively styling nodes and edges by selector, including data-driven mappers
• An extension registration API (cytoscape.use()) backing a large ecosystem of 70+ third-party layout, export, and UI extensions
• Dual build targets (ESM, CJS, UMD) so it works equally in bundler-based frontends and plain script-tag pages

Common Use Cases

• Visualizing biological pathway and molecular interaction networks in research and bioinformatics tools
• Rendering interactive dependency graphs, call graphs, or architecture diagrams inside developer tooling
• Building social network or relationship-mapping visualizations with clustering and centrality analysis
• Running pure server-side graph analysis in Node.js without ever rendering a UI
• Powering knowledge graph and ontology explorers with custom node/edge styling and layouts

Under The Hood

Architecture Cytoscape.js is organized around a central Core object (src/core/index.mjs) that composes mixins for data manipulation, events, layout, viewport control, export, and search, giving each Core instance the full public API surface without a monolithic class file. Graph elements are represented by a Collection abstraction (src/collection/) that supports jQuery-style chained selection, filtering, and traversal, with the actual algorithms (src/collection/algorithms/) implemented as separate, individually testable modules (Dijkstra, A*, Bellman-Ford, clustering algorithms, etc.) mixed into Collection. The optional Canvas renderer lives under src/extensions/renderer/ and is itself registered through the same extension mechanism (cytoscape.use()) that third-party layouts and extensions use, meaning the built-in renderer has no more special access to internals than a community plugin does. This consistent mixin-plus-extension-registry structure keeps the core small while letting styling (src/style/), layouts (src/extensions/layout/), and algorithms evolve independently.

Tech Stack The library is dependency-free at runtime — pure ES modules (.mjs) compiled via Rollup into ESM, CommonJS, and UMD bundles (dist/cytoscape.esm.mjs, dist/cytoscape.cjs.js, dist/cytoscape.umd.js), with a minified build for direct <script> tag usage. Babel handles down-level transpilation for the UMD/browser bundle while the ESM build targets modern engines directly. TypeScript consumers get first-class support via a hand-maintained index.d.ts rather than generated types. Development tooling includes ESLint (flat config) for linting and a livereload-based debug/ playground for manual visual testing during development.

Code Quality Testing is extensive and multi-layered: Mocha-based unit tests across dozens of files in test/ cover the collection API, graph algorithms, core initialization, styling, and events, with a separate test/modules suite for internal/private APIs, plus a Playwright end-to-end suite (playwright-tests/) that exercises the built bundle in a real browser. Tests run against both raw source and the compiled build (test:build) to catch bundling regressions. The test, test:js, test:modules, and lint npm scripts are composed into CI via GitHub Actions. Naming and module boundaries are consistent (one algorithm per file, index barrel files per directory), and the codebase favors small, focused modules over large multi-purpose files.

What Makes It Unique Unlike most JS charting/visualization libraries, Cytoscape.js treats graph theory as a first-class citizen rather than an afterthought to rendering — its algorithm library (centrality measures, clustering, shortest-path variants) is usable entirely headlessly, with the renderer being just one optional extension among many in the same registration system used by community plugins. This design, combined with academic origins in bioinformatics, gives it depth in graph analysis that general-purpose diagramming or charting libraries typically lack, while its extension ecosystem lets teams add layouts (e.g. force-directed, dagre, cola) and export formats without forking the core.