Unisol

An interactive 3D knowledge graph of the Kubernetes resource model, hosted at unisol.vectojs.org.

Unisol is a VectoJS forge app — a real application built on the published @vectojs/* packages to dogfood the engine. The 3D graph is drawn by @vectojs/graph3d (instanced Three.js rendering + a d3-force layout, with node picking and drag-to-pin), and the entire 2D UI overlay — the info panel, the category legend, and the hover tooltip — is rendered natively on a VectoJS <canvas> with @vectojs/core and @vectojs/ui, stacked transparently over the WebGL layer.

What it shows

Thirty core Kubernetes concepts — control-plane and node components, workloads, service & networking objects, config & storage, and RBAC — and the relationships between them (a Deployment manages ReplicaSets which manage Pods; a Service routes to Pods; a Pod mounts ConfigMaps, Secrets, and volumes; the scheduler places Pods onto Nodes; and so on). The node set and relationships were derived from a real local kind cluster, then curated into a conceptual map. Every node links through to the official Kubernetes documentation.

Interactions

• Orbit / zoom — drag empty space to orbit, scroll to zoom (Three.js OrbitControls).
• Hover — a node highlights and shows a label.
• Select — click a node to open its details panel (summary, API version, relationships, and a link to the official docs).
• Drag-to-pin — drag a node to pin it in place; the rest of the graph settles around it.

Tech stack

• @vectojs/core, @vectojs/ui, @vectojs/graph3d, @vectojs/devtools
• three (WebGL rendering + OrbitControls)
• Vite + TypeScript, deployed to Cloudflare Pages via GitHub Actions

Develop

Requires Bun.

bun install
bun run dev        # http://localhost:3333

Append ?debug to the URL to attach the VectoJS DevTools inspector and expose window.__app (scene, model, overlay, graphScene, audit(), auditOverlay()).

Verify

bun run format:check
bun run lint         # oxlint --deny-warnings src
bun run test         # model unit tests (bun test)
bun run build        # tsc && vite build

Architecture

• src/model/ — pure-TypeScript domain model (concepts, categories, curated dataset, graph helpers). No Three.js, no canvas; unit-tested with bun test.
• src/view/GraphScene.ts — the WebGL 3D graph (Three.js + @vectojs/graph3d).
• src/view/overlay/ — the VectoJS 2D UI overlay (info panel, legend, tooltip).
• src/main.ts — wires the graph and overlay together.