An open source TypeScript/JavaScript library for creating visual programming interfaces.

1. Install via npm

   npm install tsnodes

2. Import library to your project

   import TSNodes from 'tsnodes';

3. 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'>

1. Clone this repository

   git clone https://github.com/michalmarchewczyk/TSNodes

2. Install dependencies

   npm install

3. Build library

   npm run build

4. Import library to your project

   import TSNodes from 'TSNodes/lib';

5. 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'>

1. Creating editor

   const editor = new TSNodes.Editor();

2. 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);

3. Adding node types by extending class TSNodes.Node

   class node1 extends TSNodes.Node {
     constructor() {
       super(editor, 'Node 1');
     }   
   }

4. Adding node type to editor

   editor.addNode(node1);

5. Adding inputs to node type
   To add inputs to node type expand node constructor by adding this.input(args) calls or this.addInput(new TSNodes.Input(args)) 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));
     }   
   }

6. Adding outputs to node type
   To add outputs to node type expand node constructor by adding this.output(args) calls or this.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.

MIT