100knodes, interactive
300kedges
2GPU draw calls
8.3 msmedian frame · measure yours
Three calls
Positions in, a live graph out.
Give it a container and positioned nodes. Picking returns your IDs, and selection stays your state. Switch to 3D with one call; the data does not change.
import { Graphraum } from "@yggy-tech/graphraum"; const graph = new Graphraum(container, { mode: "2d" }); graph.setData({ nodes, edges }); container.addEventListener("click", (e) => { const id = graph.pick(e.clientX, e.clientY); graph.setSelection(id ? [id] : []); }); graph.setMode("3d"); // same data, now in 3D
graphraum handles
- Rendering 2D and 3D with the same data
- Camera, picking, hover and selection feedback
- Level of detail, culling and edge budgets
- Incremental updates without rebuilding the graph
- Diagnostics: draw calls, frame time, visible counts
You keep
- Your data model and what each node means
- Layout, from the built-in force helper or your own
- Labels, panels, menus and actions
- Accessibility and keyboard navigation
- Your framework. graphraum needs none.