TypeScript + WebGPU

Graphs with depth.

BubbleGraph is a framework-agnostic library for expressive, interactive force-directed bubble graphs in the browser.

BubbleGraphWebGPULabelsForcesDepth 60 fps · 420 nodes

One focused library.

Bring your own data and interface. BubbleGraph owns the difficult graphical layer: rendering, layout, animation, labels, interaction, and cleanup.

GPU-native rendering

WebGPU-batched soap-bubble nodes and instanced edges keep drawing work compact.

Force-directed layout

Repulsion, collision constraints, edge springs, annealed shuffle, and animated entrances.

Readable at scale

Perspective-aware, raster-cached multiline labels use level of detail and a bounded budget.

Complete interaction

Pan, zoom, selection, activation, hit testing, fitting, dragging, and contextual removal.

Framework neutral

Use it from plain TypeScript or wrap it in React, Vue, Svelte, or your own application shell.

Host-controlled data

Your application remains responsible for fetching data, auxiliary UI, and cascade semantics.

Small API.
Full graph UI.

Create a graph in a positioned container, add typed data, connect related nodes, and let BubbleGraph manage the visual system.

Build the library

Run npm install and npm run build. JavaScript and declarations are written to dist-lib/.

Create the graph

Supply a container and optional callbacks for selection, activation, and removal.

Add your data

Each datum needs a stable ID, label, numeric value, and any host-specific payload.

Clean up

Call destroy() when the host view unmounts.

import { BubbleGraph } from "bubblegraph";

const graph = await BubbleGraph.create({
  container: document.querySelector<HTMLElement>("#graph")!,
  onSelect: (index, node) => console.log(node),
});

const root = graph.add({
  id: "root", label: "Root item",
  value: 120, data: { url: "/root" },
});

const child = graph.add({
  id: "child", label: "Related item",
  value: 20, data: { url: "/child" },
}, root);

graph.connect(root, child);
graph.fit();