Chapter 1 of 8

Mount your first editor

One call to init(), one JSON file, one node on screen. The honest minimum.

// CHAPTER 1 — Mount your first editor (vanilla JS).
//
// The smallest XenolithGraph app: one async init call, one inline graph in the xenolith.v1 JSON
// format, one frame. Run this in any HTML page with `<div id="app" style="position:relative;
// width:100%;height:100%">` and you get a working node editor — drag, pan, zoom, palette via
// Tab — all out of the box. No theme to wire (Xen is the default).

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

// xenolith.v1 — the canonical data format. The same JSON renders in every framework adapter.
const graph = {
  version: 'xenolith.v1' as const,
  nodes: [
    {
      id: 'greeter',
      type: 'Greeter',
      position: { x: 0, y: 0 },
      render: { title: 'Greeter' },
      state: { msg: 'Hello, Xenolith' },
      pins: [
        { id: 'greeter:out', kind: 'data' as const, direction: 'out' as const, type: 'string', multiple: true, label: 'Out' },
      ],
      widgets: [
        { id: 'msg', type: 'text' as const, key: 'msg', label: 'Message', freeFloating: true },
      ],
    },
  ],
  edges: [],
}

export async function mount(target: HTMLElement): Promise<() => void> {
  // 1. Create the editor on the target element. The editor owns its own canvas.
  const editor = await XenolithEditor.init(target, { minimap: false })

  // 2. Load the graph. Same JSON shape on web, on disk, in CI — author once, run anywhere.
  editor.loadJSON(graph)

  // 3. Frame the loaded content so it sits comfortably on screen.
  editor.view.fitView({ padding: 80, maxZoom: 1 })

  // Return a teardown. The tutorial preview calls it on reset; real apps call it on unmount.
  return () => editor.destroy()
}

// CHAPTER 1 — Mount your first editor (React).
//
// React is a first-class consumer — `<XenolithGraph>` is the component, `onReady` hands you the
// editor instance when it's mounted. No imperative refs, no manual cleanup. The graph itself is
// the same xenolith.v1 JSON the vanilla example loads — author once, render anywhere.

import { XenolithGraph } from '@xenolithengine/graph-react'
import type { XenolithGraphV1 } from '@xenolithengine/graph-editor'
import { DemoStage } from '../Layout.js'

const graph = {
  version: 'xenolith.v1',
  nodes: [
    {
      id: 'greeter',
      type: 'Greeter',
      position: { x: 0, y: 0 },
      render: { title: 'Greeter' },
      state: { msg: 'Hello, Xenolith' },
      pins: [
        { id: 'greeter:out', kind: 'data', direction: 'out', type: 'string', multiple: true, label: 'Out' },
      ],
      widgets: [
        { id: 'msg', type: 'text', key: 'msg', label: 'Message', freeFloating: true },
      ],
    },
  ],
  edges: [],
}

export function Chapter01() {
  return (
    <DemoStage>
      <XenolithGraph
        className="xeno"
        resizeToWindow={false}
        onReady={(editor) => {
          editor.loadJSON(graph)
          editor.view.fitView({ padding: 80, maxZoom: 1 })
        }}
      />
    </DemoStage>
  )
}

What just happened

You mounted a fully-featured node-graph editor in three steps:

Init. XenolithEditor.init(target) creates a PIXI v8 canvas, wires interactions (pan, zoom, drag, selection, Tab palette), and applies the default Xen theme. No CSS to import, no theme tokens to wire.
Load JSON. The graph is plain data in our xenolith.v1 format — the same JSON renders the same scene in every framework adapter. No imperative node construction.
Frame. fitView centres and zooms the loaded content into view.

Try it

Drag the Greeter node — interaction is already live.
Edit the Message widget — text inputs work out of the box.
Press Tab to open the palette. You’ll see only Comment and Reroute — those are the editor’s built-in node types. Greeter isn’t there because we loaded it from JSON without telling the editor what a Greeter is. That’s exactly what Chapter 2 fixes.
Click the chip switcher below the preview to swap between the JS and React implementations — both load the exact same graph JSON.

Why JSON, not JavaScript

Throughout this tutorial, the graph itself is always JSON. The host language (JS, React, Vue, Svelte) does the wiring — events, controlled state, UI chrome — but the graph data stays in a single portable file. That’s the contract that lets you load a graph in the editor today and execute it in a worker, on the server, or inside an agent tomorrow.

Next

You shipped one node. In the next chapter, you’ll define your own node type — give it pins, a label, a default state — and instantiate it from JSON.