Overview:

The oura-node-editor is a react component library that allows users to create node-based editors. It is inspired by the node editor in Blender, but it is important to note that the project is currently in an experimental state and the API may change significantly. The npm repository for the library is not up to date, so it is recommended to pull the library and link it to your project if you wish to test it.

Features:

Node Creation: Easily create nodes with a name, x/y position, width, selected state, and zero or many connectors.
Connectors: A connector consists of pin layout (no-pins, left, right, left and right) and connector-content. Library provides generic connector-content options such as none, string, number, button, select, and check-box.
Node Linking: Nodes can be linked to each other using links.
Custom Connector-Content: Users can create their own connector-content, similar to the canvas in the oura-canvas-creator example project.
Node Movement and Resizing: Nodes can be moved and their width can be resized.
Zoom and Drag: The working sheet where nodes are displayed can be zoomed in and out and dragged.
Selection: One or many nodes and links can be selected.
Theme Customization: It is possible to extend the existing theme or create your own.
Virtualized Node Rendering: Node rendering is virtualized, which means that nodes are not rendered if they are not displayed on the screen. This improves general performance.

Summary:

The oura-node-editor is a react component library that enables users to create node-based editors. It offers various features such as node creation, connector options, node linking, customization options, and performance optimization through virtualized node rendering. However, it should be noted that the project is still experimental and the API may undergo significant changes.

Mathieuguyot

Oura Node Editor