Skip to content

EliCDavis/node-flow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

24109c1 · Apr 19, 2025

History

68 Commits
Mar 31, 2025
Feb 14, 2025
Apr 19, 2025
Aug 11, 2024
Mar 31, 2025
Mar 31, 2025
Mar 31, 2025
Apr 19, 2025
Apr 9, 2025
Mar 31, 2025
Apr 19, 2025
Mar 31, 2025
Mar 31, 2025

Repository files navigation

Node Flow

Another Flow-based Node graph Library.

Check it out here.

promotional image

About

Node Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes.

Install

Grab the latest from npm:

npm i @elicdavis/node-flow

Or download the latest build here.

Features

  • Nodes
  • Markdown Notes
  • More Nodes

Building

If you want to build the library yourself, you can run

npm run package

API

Graph API

Creation

The only requirement for creating a graph is providing it an instance of a canvas.

import { NodeFlowGraph } from "@elicdavis/node-flow";

// Create a canvas to render our graph to
var canvas = document.createElement("canvas");

// Create our Node Flow Graph
var graph = new NodeFlowGraph(canvas)

There are a bunch of optional parameters you can provide the graph:

import { NodeFlowGraph } from "@elicdavis/node-flow";
var graph = new NodeFlowGraph(canvas, {
    // Background color of the graph.
    backgroundColor: "#FF5500",

    // You can add extra items to the context
    // menu that pops up when you right click.
    contextMenu: {
        subMenus: [
            {
                // Text that shows up in the context
                // menu 
                name: "Example Context Menu Item",
                
                // This is recursive. We can nest as 
                // many submenus within eachother as
                // we want. This field is optional.
                subMenus: [],

                items: [
                    {
                        name: "Sub menu Item!!!"
                    }
                ]
            }
        ],

        // Items that show up at the base of the 
        // context menu
        items: [
            {
                // Text that shows up in the context
                // menu 
                name: "Example Context Menu Item",
                
                // Function that get's executed when
                // Item is clicked.
                callback: () => {
                    alert("Example Context Menu Item");
                }    
            }
        ]
    },

    // Notes we want rendered on the graph.
    board: {
        notes: [
            {
                // Where to render the note
                position: { x: 20, y: 20 },

                // Whether or not the note can be 
                // interacted with on the graph
                locked: true,

                // Markdown enabled text
                text: `
                # My First note!!!

                Not sure what to write here
                `
            },  
        ]
    },
});

Node API

Creation

import { FlowNode } from "@elicdavis/node-flow";

// All nodes require a title. That's about it.
var node = new FlowNode({ 
    title: "My First Node!",
});

// Be sure to add it to the graph so it can be rendered.
graph.addNode(node);

Inputs and Outputs

Create a Add node that takes two numbers and outputs a single number

import { FlowNode } from "@elicdavis/node-flow";

var node = new FlowNode({ 
    title: "Add",
    inputs: [
        { name: "a", type: "float32" },
        { name: "b", type: "float32" }
    ],
     outputs: [
        { name: "sum", type: "float32" }
    ],
});

You can also add additional inputs and outputs to the node after it's been created

node.addInput({ name: "c", type: "float32" })
node.addOutput({ name: "sum", type: "float32" })

Library Development

Just run

npm run watch