What can I build with Sigma.js?

Sigma.js is a JavaScript library for rendering and interacting with network graphs in the browser, aimed at visualizing graphs of thousands of nodes and edges. You can use it to display an existing graph dataset, add interaction such as search and neighborhood highlighting, build graph editing interfaces, and customize how nodes are rendered. It handles rendering and interactions, while the companion library graphology handles the graph data model and algorithms.

The four use cases Sigma.js describes

The library's own documentation groups what you can build into four scenarios, each with a runnable Storybook example.

Display

The most basic case: you have a graph dataset with colors, sizes, and positions for each node, and you want to visualize it on a web page. A typical example is a GEXF graph file exported from Gephi. Sigma.js renders it directly.

Explore

You add interaction so users can dig into the graph. Concretely, this means adding a search field and letting users see the neighborhood of a node when hovering it.

Interact

You are developing a web application where users create and manipulate graphs themselves. This requires letting users create nodes on click and drag and drop nodes.

Customize

You personalize how graphs are rendered — for example, displaying some nodes with pictures inside them and others differently.

How Sigma.js and graphology divide the work

Sigma.js does not work alone. The architecture is a deliberate split:

The documentation states this as: graphology handles graph data model & algorithms, sigma.js handles graph rendering & interactions, and together they form your web app.

This split answers a common question directly: no graph algorithms are implemented in Sigma.js itself. Graphology has many, from ForceAtlas2 layout to various metrics and even community detection. So if you need layout computation or metrics, that work happens in graphology before Sigma.js draws anything.

It also explains the CSV question. To get drawable data from a CSV, you process the data with graphology, then render it with sigma.js. The documentation points to a specific example for this.

When Sigma.js is the right choice, and when it isn't

Sigma.js renders graphs using WebGL. That is the core trade-off:

• Choose Sigma.js when you need to draw larger graphs faster than Canvas- or SVG-based solutions allow. The library is explicitly aimed at graphs of thousands of nodes and edges.
• Choose d3.js instead if you have small graphs (the documentation's own framing: like a few hundreds of nodes and edges) and/or you need very customized rendering. The docs state plainly that in that case d3.js is indeed the best fit.

Note the second half of that trade-off: WebGL makes custom rendering way harder to develop. So "I need something visually unusual" pushes toward d3.js, while "I need scale" pushes toward Sigma.js.

Getting it into an existing project

Two entry points, depending on your starting point:

If you want Sigma.js in an existing project:

npm install graphology sigma

The documentation directs you to the quickstart guide for the next steps.

If you are starting from nothing: the docs suggest trying a provided CodeSandbox.

If you are in React: yes, Sigma.js works in a React application. The documentation says the best way is certainly to use @react-sigma. The interactive example on the Sigma.js homepage is itself built with it, and the source code is available to inspect. The page also begins to address Angular usage, so Angular is covered as well.

What to check before committing

• Confirm your data can be expressed as a graphology graph — that is the required input path for rendering.
• If your rendering needs are highly custom, test the WebGL constraint early rather than after building the app around Sigma.js.
• If you need layout or metrics, plan for graphology in your dependency list, not just Sigma.js.