Skip to content
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.
JavaScript C# Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode chore: configure eslint Apr 28, 2019
build optimization when rendering from far away Nov 14, 2019
csharp c sharp test Jul 19, 2019
css fixed bug in context menu when fullscreen Oct 21, 2019
demo fix in property editor Oct 21, 2019
doc
external
guides Update README.md Dec 3, 2019
imgs Delete inventivetalent.mp4 Nov 20, 2018
nodes_data/imgs
src Fixed DTS for registered_node_types, node_types_by_file_extension, an… Dec 3, 2019
utils I think I messed up the git again... Aug 16, 2019
.eslintignore chore: configure eslint Apr 28, 2019
.eslintrc chore: configure eslint May 2, 2019
.gitignore chore: configure prettier Apr 25, 2019
.npmrc Package lock removed Apr 19, 2018
.prettierrc chore: configure prettier Apr 25, 2019
LICENSE added remove slot option Oct 23, 2015
README.md Update README.md Dec 2, 2019
gruntfile.js Updated with network Apr 19, 2018
index.html added remove slot option Oct 23, 2015
package.json fix in onNodeDeselected Nov 11, 2019
style.css fixes in drop Oct 4, 2016

README.md

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 the graphs.

It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.

Try it in the demo site.

Node Graph

Features

  • Renders on Canvas2D (zoom in, zoom out, panning, 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)

Nodes provided

Although it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases:

  • Interface (Widgets)
  • Math (trigonometry, math operations)
  • Audio (AudioAPI and MIDI)
  • 3D Graphics (Postprocessing in WebGL)
  • Input (read Gamepad)

Installation

You can install it using npm

npm install litegraph.js

Or downloading the build/litegraph.js version from this repository.

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>

How to code a new Node type

Here is an example of how to build a node that sums two inputs:

//node constructor class
function MyAddNode()
{
  this.addInput("A","number");
  this.addInput("B","number");
  this.addOutput("A+B","number");
  this.properties = { precision: 1 };
}

//name to show
MyAddNode.title = "Sum";

//function to call when the node is executed
MyAddNode.prototype.onExecute = function()
{
  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 in the system
LiteGraph.registerNodeType("basic/sum", MyAddNode );

or you can wrap an existing function:

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

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

Server side

It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).

var LiteGraph = require("./litegraph.js").LiteGraph;

var graph = new LiteGraph.LGraph();

var node_time = LiteGraph.createNode("basic/time");
graph.add(node_time);

var node_console = LiteGraph.createNode("basic/console");
node_console.mode = LiteGraph.ALWAYS;
graph.add(node_console);

node_time.connect( 0, node_console, 1 );

graph.start()

Projects using it

webglstudio.org

WebGLStudio

MOI Elephant

MOI Elephant

Mynodes

MyNodes

Utils


It includes several commands in the utils folder to generate doc, check errors and build minifyed version.

Demo


The demo includes some examples of graphs. In order to try them you can visit demo site or install it on your local computer, to do so you need git, node and npm. Given those dependencies are installed, run the following commands to try it out:

$ git clone git@github.com:jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80!

Open your browser and point it to http://localhost. You can select demo from the dropdown at the top of the page.

Feedback


You can write any feedback to javi.agenjo@gmail.com

Contributors

  • kriffe
  • rappestad
  • InventivetalentDev
  • NateScarlet
You can’t perform that action at this time.