Skip to main content

Introduction

Oura-node-editor is a React component library allowing you the creation of node based editors. Node based editors are used to create and edit node graph architecture. This architecture relies on atomic functional units called nodes. Each node can have a state, inputs and outputs. Those inputs and outputs can be connected together using links. By doing so, it is possible to model business logic, 3d materials and shaders, programming logic, among many other things.

Today, node based editors are used in various software to achieve many tasks:

  • Creating shaders and materials in 3d software
  • Creating game logic in some game engines
  • Editing and visualizing data and mathematical operations
  • Creating a variety of domain specific langages
  • Creating cool and strange creative coding stuff!

Another node editor ?​

Many react UI libs allows to charts and somehow node editors. Oura-node-editor is focus on those objectives:

  • Be easy to setup and use
  • Be highly modulable allowing users to create custom node and custom node connectors (more on that later)
  • Be highly efficient and allowing to render hundreds of nodes
  • Have many themes to be fit every projects

Experimental project​

This project is an experimental one. As a result, many design choices can be updated The documentation is also far from complete as of today !

Anatomy of a node​

A node in oura-node-editor have several properties:

export interface NodeModel {
    name: string; // A name: "rectangle"
    position: XYPosition; // A position: {x: 10, y: 20}
    width: number; // A width in pixel: 200
    connectors: ConnectorCollection; // Zero, one or many node connectors, see bellow
    category?: string; // An optional category ("math", "canvas", "3d", ... nodes)
    description?: string; // An optional description: "draw a circle"
}

Node connector create the body and behaviour of our node, each node connector have those properties:

export interface ConnectorModel {
    name: string; // A name: "width"
    /*
    A "pin layout" indicates if the node connector have an input, output, both or none 
    (NO_PINS=0, LEFT_PIN=1, RIGHT_PIN=2, BOTH_PINS=3)
    */
    pinLayout: PinLayout;
    /*
    A content type to indicate the nature of the node connector. 
    Some are already provided by oura-node-editor ("number", "string", "text_area", "select", "check_box", "button", "range"). 
    You can also create yours (canvas, images, 3d views, ...)
    */
    contentType: string;
    /*
    Data to store content type (a string, a number, a color, ...) or other pieces of information
    */
    data: any;

    leftPinColor?: string; //An optional left pin color ("#ff0011")
    rightPinColor?: string; //An optional right pin color ("red")
}

Bellow you have an editable json representing a single node and the result on the node editor. Feel free to try creating your first node and understand the data model!

Loading...

Anatomy of a edge​

An edge objective is to link a left pin of a connector of a node A to a right pin of a connector of node B.

export interface LinkModel {
    leftNodeId: string;
    leftNodeConnectorId: string;
    rightNodeId: string;
    rightNodeConnectorId: string;
}