An open source TypeScript/JavaScript library for creating visual programming interfaces.
-
Install via npm
npm install tsnodes
-
Import library to your project
import TSNodes from 'tsnodes';
-
Add styling
Using javascript:import 'tsnodes/lib/styles/default_dark/index.css';
or HTML:
<link rel='stylesheet' href='node_modules/tsnodes/lib/styles/default_dark/index.css'>
-
Clone this repository
git clone https://github.com/michalmarchewczyk/TSNodes
-
Install dependencies
npm install
-
Build library
npm run build
-
Import library to your project
import TSNodes from 'TSNodes/lib';
-
Add styling
Using javascript:import 'TSNodes/lib/styles/default_dark/index.css';
or HTML:
<link rel='stylesheet' href='TSNodes/lib/styles/default_dark/index.css'>
-
Creating editor
const editor = new TSNodes.Editor();
-
Rendering all editor components and appending them to document
const view = editor.view.render(); window.document.querySelector('.editor').appendChild(view); const graphs = editor.graphs.render(); window.document.querySelector('.graphs').appendChild(graphs); const nodes = editor.nodes.render(); window.document.querySelector('.nodes').appendChild(nodes); const info = editor.info.render(); window.document.querySelector('.info').appendChild(info);
-
Adding node types by extending class
TSNodes.Node
class node1 extends TSNodes.Node { constructor() { super(editor, 'Node 1'); } }
-
Adding node type to editor
editor.addNode(node1);
-
Adding inputs to node type
To add inputs to node type expand node constructor by addingthis.input(args)
calls orthis.addInput(new TSNodes.Input(args))
callsclass node1 extends TSNodes.Node { constructor() { super(editor, 'Node 1'); this.input('input 1', 'default value'); this.input('input 2', ''); this.addInput(new TSNodes.Input('input 3', '', false)); } }
-
Adding outputs to node type
To add outputs to node type expand node constructor by addingthis.output(args)
calls orthis.addOutput(new TSNodes.Output())
calls.class node1 extends TSNodes.Node { constructor() { super(editor, 'Node 1'); this.input('input 1', 'default value'); this.input('input 2', '', ); this.addInput(new TSNodes.Input('input 3', '', false)); this.output('output 1', function1); this.addOutput(new TSNodes.Output('output2', function2, false)); } }
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.