The node graph editor for the web
ngraph is a declarative, batteries-included, Blender-style node graph editor for React, built on xyflow.
$ npm install reactflow @clarkmcc/nodegraph
ngraph is a declarative, batteries-included, Blender-style node graph editor for React, built on xyflow.
Easily add a node graph to your app
The best node graph engines are only available as part of advanced (and often closed-source) 3D modeling software like Unreal Engine, or Blender. ngraph brings a comparable feature set to the web.
Using just a few lines of JSON configuration, you can easily and rapidly define custom types, colors, and nodes.
This library tries to provide the most common features you need including copy/paste and builtin automatic layout engines.
All of the xyflow properties are available for you to customize to your heart's content.
Out-of-the-box inputs
Rapidly build your own nodes with a variety of built-in inputs including text/number inputs, dropdowns, checkboxes, button groups.
Array inputs
Easily convert any input into an array input. Array inputs accept any number of connections as long as the types match.
Multiple handle shapes
Pick from a variety of handle shapes including circle, diamond, and diamond + dot.
Input Groups
Sometimes nodes get large and unwieldy. Input groups allow you to collapse and expand groups of inputs to keep your nodes organized.