@gluonjs/graph

@gluonjs/graph is an optional, canvas-backed network graph for Gluon. It has no layout dependency: node positions are deterministic from seed, node input, and links. The element owns pan, zoom, drawing, and selection; the host owns domain labels, filtering controls, and persistence.

The package entry is intentionally a side-effectful registration import. Import @gluonjs/graph once before querying <gluon-graph>; type-only imports do not register the custom element.

@gluonjs/graph at a glance

Runtime: browser · Release: 1.13.0

Documentation guide · npm · Source

Public API: @gluonjs/graph

Install

npm install @gluonjs/graph

Quick start

import '@gluonjs/graph';

const graph = document.querySelector('gluon-graph');

Choose this package when

• Canvas-backed graph visualization with deterministic layouts.
• Pan, zoom, selection, and link rendering owned by the element.
• Optional knowledge-map and dependency-map views.

Choose another boundary when:

• Does not own graph data modeling or filtering controls.
• Consumers must provide their own labels and persistence.

Related documentation

• Components
• Application

Render a knowledge map

import '@gluonjs/graph';
import type { GraphGroup, GraphLink, GraphNode } from '@gluonjs/graph';

const graph = document.querySelector('gluon-graph');
if (!graph) throw new Error('Missing graph');

const groups: GraphGroup[] = [
  { id: 'research', label: 'Research', color: '#8ba9ff' },
  { id: 'product', label: 'Product', color: '#b9e635' },
];
const nodes: GraphNode[] = [
  { id: 'brief', label: 'Research brief', group: 'research', weight: 3 },
  { id: 'roadmap', label: 'Product roadmap', group: 'product', weight: 4 },
];
const links: GraphLink[] = [{ source: 'brief', target: 'roadmap' }];

Object.assign(graph, { groups, nodes, links, showLabels: true });
graph.addEventListener('graph-node-select', (event) => console.info(event.detail.node.id));

The initial release is suited to a few hundred rendered nodes. It deliberately does not index files, persist layouts, edit graphs, or emulate another product. Use the documented activeGroups, searchQuery, nodeScale, linkDensity, and showLabels properties to wire native host controls. Escape recentres the canvas, arrow keys pan it, and +/- zoom it. The canvas is a visualisation surface; the open Keyboard node list is the accessible DOM representation. Its native buttons follow the same active-group and search filters, expose aria-pressed, and emit the same graph-node-select event as pointer selection.

License

MIT License, Copyright © 2026 Marc Malerei.