GitHub - Comfy-Org/litegraph.js: A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. (original) (raw)
@ComfyOrg/litegraph
This is the litegraph version used in ComfyUI_frontend.
It is a fork of the original litegraph.js
. Some APIs may by unchanged, however it is largely incompatible with the original.
Some early highlights:
- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (#1)
- Type schema change for ComfyUI_frontend TS migration (#3)
- Zoom fix (#7)
- Emit search box triggering custom events (#10)
- Truncate overflowing combo widget text (#17)
- Sort node based on ID on graph serialization (#21)
- Fix empty input not used when connecting links (#24)
- Batch output connection move/disconnect (#39)
- And now with hundreds more...
Install
npm i @comfyorg/litegraph
litegraph.js
A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
Description of the original litegraph.js
A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.
It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
Features
- 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
- Graphs can be executed in NodeJS
- Highly customizable nodes (color, shape, widgets, custom rendering)
- Easy to integrate in any JS application (one single file, no dependencies)
- Typescript support
Installation
You can install it using npm
npm install @comfyorg/litegraph
How to code a new Node type
Here is an example of how to build a node that sums two inputs:
import { LiteGraph, LGraphNode } from "./litegraph"
class MyAddNode extends LGraphNode { // Name to show title = "Sum"
constructor() { this.addInput("A", "number") this.addInput("B", "number") this.addOutput("A+B", "number") this.properties.precision = 1 }
// Function to call when the node is executed onExecute() { var A = this.getInputData(0) if (A === undefined) A = 0 var B = this.getInputData(1) if (B === undefined) B = 0 this.setOutputData(0, A + B) } }
// Register the node type LiteGraph.registerNodeType("basic/sum", MyAddNode)
Server side
It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
import { LiteGraph, LGraph } from "./litegraph.js"
const graph = new LGraph()
const firstNode = LiteGraph.createNode("basic/sum") graph.add(firstNode)
const secondNode = LiteGraph.createNode("basic/sum") graph.add(secondNode)
firstNode.connect(0, secondNode, 1)
graph.start()
Projects using it
ComfyUI
Projects using the original litegraph.js
Click to expand
webglstudio.org
MOI Elephant
Mynodes
Feedback
Please open an issue on the GitHub repo.
Development
Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
Releasing
Use GitHub actions to release normal versions.
- Run the
Release a New Version
action, selecting the version incrment type - Merge the resultion PR
- A GitHub release is automatically published on merge
Pre-release
The action directly translates Version increment type
to the npm version command. Pre-release ID (suffix)
is the option for the --preid
argument.
e.g. Use prerelease
increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only. Use patch
when ready to remove the pre-release suffix.
Contributors
You can find the current list of contributors on GitHub.
Contributors (pre-fork)
- atlasan
- kriffe
- rappestad
- InventivetalentDev
- NateScarlet
- coderofsalvation
- ilyabesk
- gausszhou