Skip to content
This is the alpha v4 version website. Looking for the v3 documentation?
sigma.js sigma.js

Browser bundle

Sigma ships a standalone UMD bundle (sigma.min.js) for usage without a package manager, typically through a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/4.0.0-beta.6/sigma.min.js"></script>

It exposes a single global: Sigma, the same class as the npm package’s default export. That class also carries, as static properties, basically everything the npm package exports, each thing kind of at the right place:

  • The values exported by the main sigma entrypoint sit directly on the class: Sigma.Camera, Sigma.DEFAULT_STYLES, Sigma.DEFAULT_CAMERA_STATE, etc.
  • The subpath entrypoints (sigma/rendering, sigma/utils, etc.) sit on namespaces of the same name: Sigma.rendering, Sigma.utils, etc.

For instance, drawing edges as curves uses pathCurved from sigma/rendering:

// ESM
import { pathCurved } from "sigma/rendering";


// Browser bundle
const { pathCurved } = Sigma.rendering;

The definitive list is the bundle’s entrypoint itself, which is short and readable: packages/sigma/src/index-bundle.ts. The symbols themselves are documented in the API reference.

Satellite packages

The @sigma/* packages (@sigma/node-image, @sigma/layer-leaflet, etc.) do not ship UMD bundles, and we don’t want to keep them updated on cdn.js, as this is too demanding. They can still be used without a package manager, as ES modules, through jsdelivr’s /+esm endpoint, which rewrites their imports on the fly:

<!doctype html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/4.0.0-beta.6/sigma.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.26.0/graphology.umd.min.js"></script>
</head>
<body>
  <div id="container" style="width: 800px; height: 600px"></div>
  <script type="module">
    import { layerImage } from "https://cdn.jsdelivr.net/npm/@sigma/node-image@4.0.0-alpha.3/+esm";


    const graph = new graphology.Graph();
    graph.addNode("1", {
      x: 0,
      y: 0,
      size: 1,
      image: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Jim_Morrison_1969.JPG",
    });
    graph.addNode("2", {
      x: 10,
      y: 10,
      size: 2,
      image: "https://upload.wikimedia.org/wikipedia/commons/b/b1/Eric_Clapton_1.jpg",
    });
    graph.addEdge("1", "2");


    new Sigma(graph, document.getElementById("container"), {
      settings: { autoRescaleContent: "nodes" },
      primitives: {
        nodes: {
          variables: { image: { type: "string", default: "" } },
          layers: [Sigma.rendering.layerFill(), layerImage()],
        },
      },
    });
  </script>


</body>
</html>

The Sigma and graphology globals are available in the module: browsers always run classic <script> tags before module scripts.

Limitations

  • Type-only exports (interfaces, type aliases) do not exist at runtime, so they have no browser bundle counterpart.
  • The bundle includes the whole library. For production applications where size matters, prefer the npm package, so your bundler can tree-shake unused code.
  • The /+esm endpoint resolves a satellite package’s sigma dependency to its own ES module copy, separate from the Sigma global. The helpers satellite packages use work fine that way, but it means some sigma code is downloaded twice.