Composable graph visualization components for RDF, LPG, and Holonic graph paradigms. Install the pieces you need; compose them into your application.
Auto-generated from TypeScript. Every class, function, type, and prop documented.
🧩Interactive Storybook. Browse views, controls, and encoding panels live.
🕸️Five scenario shells driving the graph canvas: data science, analytics, supply chain, MBSE, healthcare.
🔌Drive the toolkit from your app: custom buttons, store subscriptions, and the JSON contracts. Every snippet runs in CI.
📂README, ARCHITECTURE.md, specs, and planning docs on GitHub.
# Install (pnpm required)
pnpm add @g3t/core @g3t/react react react-dom \
cytoscape cytoscape-fcose zustand echarts
// Minimal graph render
import { UGM } from "@g3t/core";
import { CytoscapeCanvas } from "@g3t/react";
const ugm = new UGM();
ugm.addNode("alice", { types: ["Person"], properties: { name: "Alice" } });
ugm.addNode("bob", { types: ["Person"], properties: { name: "Bob" } });
ugm.addEdge("alice", "bob", { type: "knows" });
function App() {
return <CytoscapeCanvas ugm={ugm} />;
}
@g3t/core is framework-agnostic (no React imports).
@g3t/react wraps it for React consumers.
Source-boundary tests enforce this at build time. Read
ARCHITECTURE.md
for the full design rationale.