cnc-litegraph
A node-graph editor — boxes with typed inputs and outputs, wired together on a canvas — wrapping litegraph.js. For visual pipelines, rule builders and dataflow editors.
Quick start
Node types are supplied through nodes, each with a builder function
that defines its ports. Because builders are FUNCTIONS, they cannot survive block state's JSON
serialisation — assign them to the element as _nodes instead.
const el = document.getElementById('graph')
el._nodes = [
{
type: 'basic/sum',
title: 'Sum',
builder() {
this.addInput('A', 'number')
this.addInput('B', 'number')
this.addOutput('A+B', 'number')
}
}
]Usage guidance
Everything interesting here is a FUNCTION, which is the constraint that shapes how you use it. Node builders cannot come from block state — JSON drops them — so this widget is driven from a script or a widget controller, not from page data.
There is no change event and no serialised output property, so persisting a graph the user built means going through the underlying litegraph instance. Treat that as the widget's cost and decide it is worth paying before reaching for it.
It is a heavyweight CDN-backed canvas editor. Where the "graph" is really a list of steps,
cnc-form-builder
or a plain ordered list is far easier to build, persist and test.