Install

npm install @xenolithengine/graph-editor pixi.js

That’s all. @xenolithengine/graph-editor lists core, render-pixi, and theme-xen as transitive dependencies — npm pulls them automatically. pixi.js stays a peer dependency so you pin it yourself and keep control of the WebGL renderer version.

Mount

import { XenolithEditor } from '@xenolithengine/graph-editor'

const editor = await XenolithEditor.init('#app')

That single call:

Loads bundled Inter (Regular / SemiBold / Bold) from inside the theme package — no Google Fonts.
Creates a PIXI v8 Application, attaches a canvas to your target element.
Wires pan, zoom, drag, selection, marquee, and node interactions.
Returns an editor instance you can populate.

There is no second setup step. If you npm install, you can init.

Add nodes and edges

import { createNodeId, createPinId } from '@xenolithengine/graph-core'

const a = {
  id: createNodeId(),
  type: 'Source',
  position: { x: 100, y: 100 },
  size: { x: 150, y: 70 },
  state: {},
  pins: [
    { id: createPinId(), kind: 'data', direction: 'out', type: 'float', multiple: true, label: 'Output' },
  ],
}

editor.addNode(a, { category: 'logic', title: 'Source' })

editor.connect(fromNode, fromPinIndex, toNode, toPinIndex, opts?) draws an edge between two pins. The optional opts is RenderEdgeOptions — { sourceType?, label?, markerEnd?, animated?, pathStyle?, noMidpoint? }. The wire colour follows the source pin’s type — an invariant of the Xen theme.

Interaction

Gesture	Behaviour
Wheel	Focal zoom to the cursor
Right- or middle-button drag	Pan
Left-click on a node	Select (replaces selection)
Shift + left-click	Toggle in multi-selection
Left-click on empty canvas	Clear selection
Left-drag on empty canvas	Marquee selection (nodes inside the box)
Left-drag on a node	Move it (and the whole selection if any), snapped to grid
Hold Alt while dragging	Disable snap-to-grid
Click on a header chevron	Collapse / expand the node to / from pill mode