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
- 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)
First project
<html> <head> <link rel="stylesheet" type="text/css" href="litegraph.css"> <script type="text/javascript" src="litegraph.js"></script> </head> <body style='width:100%; height:100%'> <canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas> <script> var graph = new LGraph(); var canvas = new LGraphCanvas("#mycanvas", graph); var node_const = LiteGraph.createNode("basic/const"); node_const.pos = [200,200]; graph.add(node_const); node_const.setValue(4.5); var node_watch = LiteGraph.createNode("basic/watch"); node_watch.pos = [700,200]; graph.add(node_watch); node_const.connect(0, node_watch, 0 ); graph.start() </script> </body> </html>