Skip to content
Get packs

Cytoscape.js

A JavaScript library for building, analyzing, and drawing interactive network graphs.

GitHub Download v3.34.4
Stars
11.3k
Forks
1.7k
Licence
MIT
Language
JavaScript
Last update
6 days ago
Type
Library

What it is

Cytoscape.js is a JavaScript library for working with graphs, which are collections of nodes connected by edges, such as biological pathways or social networks. It includes a graph model for analysis and an optional renderer that displays interactive graphs in a web page. It can be used in browser user interfaces or in server-side Node.js code.

  • Render a network of relationships as an interactive graph inside a web page
  • Load a set of nodes and edges and run graph analysis on the model in Node.js
  • Display a large public network, such as the Tokyo railway stations demo linked in the README

Great for

  • Developers adding interactive network diagrams to a web app
  • Scientists who need to model and visualise relational data such as biological networks
  • Teams that want graph analysis in Node.js without a separate tool
  • Students learning graph theory who want to experiment in JavaScript

Not ideal for

  • People who only need a static chart or simple diagram, since the library is aimed at graph data and interactive views
  • Users who want a finished desktop application rather than code to integrate, because the README describes it as a library
  • Projects needing a graph database for storage, since this README covers an in-memory graph library
Step-by-step guide: how to use Cytoscape.jsInstall, first run, examples, tips and FAQs
Cytoscape.js vs G6Cytoscape.js vs Sigma.js

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · npm

    Build dependencies (from README, for building from source)

    npm install

    Build all library targets (from README)

    npm run build
  2. 2

    Run it

    • Install Node.js and npm.
    • Add the cytoscape package from npm to your project, or clone the repository.
    • Create a container element on the page and pass elements and container to cytoscape().
    • Open the page in a browser to see the graph.
    • Check the documentation at js.cytoscape.org for the next steps.
  3. 3

    Get the most out of it

    • Use the documentation site and its demos for examples beyond the basic call
    • Use the npm watch targets (watch, watch:umd) during development, as described in the README
    • Check the project's extensions list (the README badge references 70 extensions) for added functionality
    • Run npm run test:js to test against the source code when contributing

Downloads

Source code (.zip)unstable branch · straight from GitHubRelease v3.34.4Release notes and sourceOfficial website & docsjs.cytoscape.org

Strengths

  • Described in the README as a fully featured graph theory library with both model and renderer
  • Simple starting point: a single cytoscape({ elements, container }) call, per the README
  • Published in peer-reviewed Bioinformatics articles (2016 and 2023) and has an MIT license

Trade-offs

  • The README is truncated and does not list the full feature set, so details must be checked in the documentation site
  • Install steps are not in the README beyond npm usage hints; setup for end users depends on the project website
  • Build instructions in the README target contributors and require Node.js and npm

How it compares

ProjectStarsTypeLevelUpdatedBest for
cytoscape.js (this)11.3kLibraryintermediate6 days agoDevelopers adding interactive network diagrams to a web app
sigma.js12.2kLibraryintermediate9 days agoWeb developers who need to display large network graphs in a browser
G612.4kLibraryintermediate10 days agoFrontend developers building interactive network or relationship diagrams in a web app
visx21.1kLibraryintermediate5 months agoReact developers who want full control over how a chart looks and behaves
plotly.py18.9kLibrarybeginner5 days agoPython users who want hoverable, zoomable charts without writing JavaScript
plotly.js18.4kLibrarybeginner7 days agoWeb developers who want interactive charts in their own site or app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.