Skip to content
Xenolith Graph Xenolith Graph

XenolithGraph

BETA Node-graph editorAI-native · debuggableWebGL · MIT

Beautiful node editing. Built to embed.

An AI-native node editor with its own visual identity. Built for the next generation of LangFlow-style tools — not another React-Flow clone. WebGL renderer, MCP server for Claude / Cursor, framework-agnostic core, polished Xen design system out of the box.

Beta — the API may still change before v1.0.

Open documentation Learn Playground Examples GitHub
XenolithGraph

Xen — the default theme

A real graph rendered with Xen, the original XenolithGraph design system. Additional themes (e.g. Liquid Glass) live in the playground and the Examples gallery.

Xen — the default theme

What is inside

Everything a real-world graph editor needs out of the box — UX, model, themes, plugins. Pick the parts you want, the rest stays out of the way.

  • 01

    Xen — original design system

    Production-ready default theme — designed in Figma as a node-editor language in its own right, not a skin on a generic flowchart library. `setTheme()` swaps themes live: ship with Xen, write your own, or add extras (Liquid Glass lives in the playground and examples).

  • 02

    Built for any framework

    First-party adapters for React, Vue, Svelte, Solid, Angular and Web Components — and a vanilla path that needs nothing. The core is framework-agnostic, zero-dep, headless.

  • 03

    Insert palette · commands · hotkeys

    Tab opens a fuzzy-search palette. Register named commands and bind hotkeys (Mod+Z, Cmd+Shift+K) — your shortcuts coexist with built-ins. Tab-drag from an empty pin spawns a compatible node on drop.

  • 04

    Pins, edges, multi-drag

    Typed pins with compatibility checks and registerable conversions. Marquee-select, snap-to-grid, Alt-rewire, edge labels, arrowheads, animated edges, four path styles (bezier, smoothstep, step, linear).

  • 05

    Widgets inside nodes

    Declarative number, slider, combo, text, toggle, colour, button — plus custom canvas-drawn and DOM-mounted controllers (React / Vue / Svelte work too). Conditional visibility on widget state, properties sidebar, live values on display widgets.

  • 06

    Macros, templates, subgraphs

    Group a selection into an inline macro, or extract it as a reusable template you can instantiate elsewhere. Double-click to dive in; a breadcrumb tracks the path. Convert between macro and template either direction.

  • 07

    Save, restore, export

    Versioned xenolith.v1 JSON with per-schema migrate hooks — old graphs upgrade automatically. ComfyUI workflow importer included. Export the entire graph (not just the viewport) to PNG or JPEG at any resolution.

  • 08

    Auto-layout · minimap · large graphs

    Drop-in plugins for Dagre and ELK arrange any graph with one call (animated tweens included). Built-in minimap, viewport virtualisation past 300 nodes, level-of-detail rendering, and an in-editor properties panel that travels with your selection.

  • 09

    AI-native via MCP

    A built-in MCP server lets Claude Desktop or Cursor build the graph directly: list_node_types → add_node → connect_pins → auto_layout. All mutations flow through the command bus — undo is free. "I describe it, the editor builds it."

30-second start

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

// One call — fonts, PIXI, viewport, grid, interactions are wired.
const editor = await XenolithEditor.init('#app')

// Load a graph, or build one by registering schemas + spawning from the palette.
editor.loadJSON(myGraph)

// Done. Drag, connect, undo, dive, snap, save — they all just work.

Built with

  • TypeScript
  • PIXI v8
  • Astro
  • Vitest
  • Playwright
  • pnpm + Turbo
  • MIT

Ready to embed

MIT license, published on npm. Built for AI-workflow front-ends, shader and material editors, dataflow editors — anything node-based. PRs and issues welcome.

Documentation →