index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
<meta property="og:title" content="GameEditor" />
<meta property="og:description" content="GameEditor for simple games" />
<meta property="og:image" content="" />
-->

<title>litegraph.js</title>
	<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/github-c066013be20516a6aae45467044fa109f18bd0c6.css">
	<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/github2-97081caeb5890bc349a9ff52de33ac5ba1a4b6cc.css">
	<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/styleguide-4a2ef42768c9e616cf8022dec2fe99290430ac2c.css">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
	</style>
</head>
<body>

<div id="wrap">
	<div id="main">
		<div id="content" class="markdown-body">
			<h1>litegraph.js</h1>
			<p>Litegraph.js is a library that allows to create modular graphs on the web, similar to PureData.</p>
			<p>Graphs can be used to create workflows, image processing, audio, or any kind of network of modules interacting with each other.</p>
			<p>Some of the main features:</p>
			<ul>
				<li>Automatic sorting of modules according to basic rules.</li>
				<li>Dynamic number of input/outputs per module.</li>
				<li>Persistence, graphs can be serialized in a JSON.</li>
				<li>Optimized render in a HTML5 Canvas (supports hundres of modules on the screen).</li>
				<li>Allows to run the graphs without the need of the canvas (standalone mode).</li>
				<li>Simple API. It is very easy to create new modules.</li>
				<li>Edit and Live mode, (in live mode only modules with widgets are rendered.</li>
				<li>Contextual menu in the editor.</li>
			</ul>
			
			<h2>Usage</h2>

			<p>Include the library</p>
			<pre>
&lt;script type="text/javascript" src="../src/litegraph.js"&gt;&lt;/script&gt;</pre>

			<p>Create a graph</p>
			<pre>
var graph = new LGraph();</pre>

			<p>Create a canvas renderer</p>
			<pre>
var canvas = new LGraphCanvas("#mycanvas");</pre>

			<p>Add some nodes to the graph</p>
			<pre>
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);</pre>

			<p>Connect them</p>
			<pre>
node_const.connect(0, node_watch, 0 );</pre>

			<p>Run the graph</p>
			<pre>
graph.start();</pre>

			<h2>Example of editor</h2>
			<ul>
				<li><a href="editor">Module editor</a></li>
			</ul>

			<h2>Documentation</h2>
			<p>Here you can check <a href="doc">automatically generated documentation</a>.</p>

		</div>
	</div>
</div>

</body>
</html>
