This project is an experimental port and refactor of litegraph.js (based on litegraph.ts) to TypeScript with ESM module support.

litegraph.ts is a TypeScript library designed to create graphs in the browser, akin to Unreal Blueprints. Users can easily program nodes, and the library includes an editor for constructing and testing graphs.

• Seamless integration with existing web applications
• Capability to run graphs independently of the editor
• Extensive documentation available

Note: The API and serialization format are not entirely compatible with vanilla litegraph.js and may change during development.

Note 2: This project's primary objective is to publish litegraph.ts to npm while carrying out ongoing renovations and refactoring.

• Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
• Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
• Optimized to support hundreds of nodes per graph (on editor but also on execution)
• Customizable theme (colors, shapes, background)
• Callbacks to personalize every action/drawing/event of nodes
• Subgraphs (nodes that contain graphs themselves)
• Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UIs)
• Graphs can be executed in NodeJS
• Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering)
• Easy to integrate in any JS application (one single file, no dependencies)
• Typescript support

The above are the features of litegraph.js, which this library fully inherits. Below are the new features continuously updated in this library.

(A checkmark indicates implemented features)

• DOMWidget: Internally implemented widgets that support DOM, making it easy to create various UIs
• ReactWidget: Integrate support for using React components as widgets, allowing for more dynamic and complex UIs within nodes
• Getter Setter Node: Implement getter and setter nodes that determine node connections in a hidden form
• Event Bus: LGraph / LGraphCanvas / LGraphNode support event subscription, making it easy to customize various features
• Progress: draw node progress / highlight
• Dom Anchors: You can freely insert DOM elements in any direction of the node's top, bottom, left, right, center, and middle to enhance UI functions, such as tooltip or error message
• Customize ContextMenu: Provide interfaces to customize all context menus in the graph
• Customize Dialog: Provide interfaces to customize all dialogs in the graph
• Graph Scheduler: Provide graph connection parsing based on graph theory, decompose component, and control different component(sub-graphs)
• Core Code strictNullChecks: Type safe everywhere!
• Input/Output widget: Provide widgets for easier handling of input and output within nodes.
• Control Flow: Introduce nodes that manage control flow like conditional branches and loops.
• UI testing

npm install @litegraph-ts/core @litegraph-ts/nodes-basic

import { LiteGraph, LGraph, LGraphCanvas } from "@litegraph-ts/core"
import { ConstantNumber, Watch } from "@litegraph-ts/nodes-basic"

// Include litegraph's CSS, required for the UI to function properly
import "@litegraph-ts/core/css/litegraph.css"

// Grab canvas element from the index.html
const root = document.getElementById("main") as HTMLDivElement;
const canvas = root.querySelector<HTMLCanvasElement>(".graphCanvas");

// Setup graph (nodes/logic) and graph canvas (rendering/canvas/UI)
const graph = new LGraph();
const graphCanvas = new LGraphCanvas(canvas, graph);
graphCanvas.background_image = "imgs/grid.png";
(window as any).graph = graph;
(window as any).graphCanvas = graphCanvas;

// Refresh graph on every draw tick in a loop
graph.onAfterExecute = () => {
    graphCanvas.draw(true);
};

// Create a ConstantNumber, sends a constant number on its output
var constNumber = LiteGraph.createNode(ConstantNumber);
constNumber.pos = [200, 200];
constNumber.setValue(4.5);

// Create a Watch, displays input value on its panel
var watch = LiteGraph.createNode(Watch);
watch.pos = [600, 300];

// Add components to the graph
graph.add(constNumber);
graph.add(watch);

// Connect the first output of the number (output 0) to the first input of the watch (input 0)
constNumber.connect(0, watch, 0);

// Begin executing logic on the graph
graph.start();

export class SumNode extends LGraphNode {
  static slotLayout: SlotLayout = {
    inputs: [
      {
        type: "number",
        name: "num_a",
      },
      {
        type: "number",
        name: "num_b",
      },
    ],
    outputs: [
        {
            type: 'number',
            name: 'sum'
        }
    ]
  };

  override onExecute(param: any, options: object): void {
    const input0 = this.getInputData(0) ?? 0;
    const input1 = this.getInputData(1) ?? 0;
    this.setOutputData(0, input0 + input1)
  }
}

LiteGraph.registerNodeType({
  class: SumNode,
  title: "Sum Node",
  desc: "Add number A number b",
  type: "demo/sum",
});

Or you can wrap an existing function:

function sum(a,b){
   return a+b;
}

LiteGraph.wrapFunctionAsNode("demo/sum",sum, ["Number","Number"],"Number");

class TextareaWidget extends DOMWidget {
    constructor(
        name: string,
        node: LGraphNode,
        {
            defaultValue,
            placeholder,
        }: {
            defaultValue?: string;
            placeholder?: string;
        } = {},
    ) {
        const element = document.createElement("textarea");
        element.style.resize = "none";
        element.value = node.properties[name] ?? defaultValue ?? "";
        if (placeholder) {
            element.placeholder = placeholder;
        }

        super({
            element,
            name,
            node,
            options: {
                hideOnZoom: true,
                getValue: () => element.value,
                setValue: (x) => (element.value = x),
            },
        });

        element.addEventListener("input", () => {
            this.updateProperty();
        });
    }
}

GUIDE.md