Expertrees

Overview

Knowledge Graphs That Feel Like Navigation, Not Diagrams

Standard graph visualizations optimize for showing everything at once — which works fine for small graphs but becomes an unreadable tangle the moment a real knowledge domain gets involved. Expertrees takes a different approach: you never see the whole graph. You navigate it.

Clicking a bubble node enters its context, replacing the current view with that node's children — their own constellation, sized and laid out by a D3 force simulation. Going back pops the navigation stack. The result feels less like inspecting a database and more like exploring a space.

The library ships as four separate npm packages under the @expertrees scope — a framework-agnostic core plus thin adapters for Vue, React, and Angular. This site uses @expertrees/vue to power the interactive skill tree on the About page.

Architecture

One Engine, Four Adapters

The core package has zero framework dependencies — it takes a raw HTMLCanvasElement and owns everything from there: force layout, animation loop, input handling, theming. Each framework adapter is a thin wrapper that handles mounting the canvas, forwarding reactive props, and translating framework lifecycle events into engine API calls.

// Turborepo ensures core builds before adapters run tests
"tasks": {
  "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] },
  "test":  { "dependsOn": ["^build"] },
  "dev":   { "cache": false, "persistent": true }
}

Rendering

What Makes It Look Like a Star Map

Every frame is drawn to a 2D canvas context. The renderer maintains several concurrent animation layers that run independently: background twinkling stars in screen space, bubble nodes with breathing scale animations and rotating orbital rings, leaf nodes rendered as twinkling stars with deterministic flicker patterns (seeded by node ID, so the same node always twinkles the same way), and optional edge particle effects that travel along graph edges.

Parent nodes — those with children — glow. The glow is rendered as a radial gradient layered beneath the node fill, with radius and opacity animated on a breathing curve. Entering a bubble triggers a burst effect: particles scatter outward from the node's position as the view transitions into the new context.

Feature

Five Semantic Node States

Each node carries an independent state that controls its visual appearance without coupling to the graph structure. States can be set externally at any time — the renderer reacts immediately. Combined with the theming system, each state can have its own color, glow, opacity, and shape overrides.

// Set state on any node at any time
skillTree.setNodeState('typescript', 'highlighted')

// Attach evidence to a node
skillTree.addEvidence('typescript', {
  type:  'link',
  label: 'M.S. Thesis',
  url:   'https://...'
})

Architecture

Four Decisions Worth Explaining

CI / CD

Automated Releases with Changesets

Each PR that changes package behaviour ships with a changeset — a small markdown file that describes the change and its version impact (patch, minor, or major). On merge to main, a GitHub Actions workflow collates open changesets, bumps the affected package versions, updates changelogs, and publishes to npm using OIDC trusted publishing — no long-lived tokens stored in secrets.

Type-checking, builds, and Vitest tests all run as CI gates before merge. Turborepo's task graph ensures the core is always built before adapter tests run — the same ordering that npm workspaces can't enforce on its own.