Learn XenolithGraph

A linear, hands-on path from blank canvas to a running graph. Each chapter introduces one new concept on top of the previous one — same graph, growing capabilities. Switch between JS and React in every chapter — the editor is one library; only the host language changes.

1. 01 Mount your first editor One call to init(), one JSON file, one node on screen. The honest minimum. Bootstrap the editor and load a single node from JSON.
2. 02 Register your first node type Declare a NodeSchema once. JSON nodes shrink to id + position + state — the editor mints pins and widgets from the schema. Add `editor.registry.register(schema)` before `loadJSON` — and watch the JSON collapse.
3. 03 Connect nodes with typed edges Two registered types, one wire between them — and the editor refuses to connect mismatched types. Register a second schema, declare an edge in JSON, see typed validation at work.
4. 04 Widgets — let users edit node state text, combo, slider, toggle, color — declarative, in-node, and conditional. No host code per widget. Grow the Greeter with five widget types, including one that appears only on a toggle.
5. 05 Events — drive your UI from the graph Typed event bus, reactive hooks, in-editor panels. No refs, no polling, no manual wiring. Subscribe to `widget:changed` / `selection:changed` / graph mutations and paint a live readout.
6. 06 Save & load — the graph is just data toJSON() / loadJSON(), autosave to localStorage, download / upload a .json file. Wire autosave + a Save / Load toolbar; reload the page and the scene comes back.
7. 07 Run the graph — a topological executor Walk the DAG node by node: collect inputs, compute, cache outputs, light up the active node. 8 nodes, 7 edges, Kahn's algorithm, ~80 lines of plain JS — your first real runtime.
8. 08 Make it yours — themes, minimap, custom widgets The polish pass: swap themes at runtime, dock a minimap, paint a custom widget in canvas. Theme switcher (Xen / Liquid Glass), minimap on, custom level bar widget on the Mixer.