6 ms·

Awesome Node-Based UIs

194 points by moklick 4y ago

moklick 4y ago
Just open an issue or PR or leave a comment here if you have any suggestions for the list :)
jakearmitage 4y ago
I always wanted to find a nice Vanilla JS library that provided a base for what essentially is UE's Blueprints or the old Yahoo! Pipes.
- moklick 4y ago
  the docs are missing but this looks good https://github.com/jagenjo/litegraph.js https://github.com/jagenjo/litegraph.js
- catapart 4y ago
  This is VERY anemic, as far as features go, but if you're just looking for something easy to understand that uses native web features (vanilla js and web components), I've built a starting point: https://catapart.github.io/Magnit.NodeGraph/ https://catapart.github.io/Magnit.NodeGraph/
bhouston 4y ago
Don't forget behave-graph/behave-flow, the Unreal Engine Blueprints / Unity Visual Script like interaction/behavior system: https://github.com/bhouston/behave-graph https://github.com/bhouston/behave-graph https://github.com/beeglebug/behave-flow https://github.com/beeglebug/behave-flow
- moklick 4y ago
  added!
deleted 4y ago
[deleted]
brasetvik 4y ago
I think Blender is worth an honerable mention. :) Geometry nodes, part of «everything Nodes», is pretty interesting: https://youtu.be/kMDB7c0ZiKA https://youtu.be/kMDB7c0ZiKA
- moklick 4y ago
  Good point. If we add blender we also have to add Houdini I guess :D
  - jasonjamerson 4y ago
    Da Vinci Resolve, Unreal Engine, everything is going node based.
    - lattalayta 4y ago
      Agreed, many VFX graphics programs are node based - two more would be Nuke and Katana from The Foundry. Natron would be an open source clone of Nuke, similar to how Gaffer is essentially an open source clone of Katana
  - johnofthesea 4y ago
    Also Dynamo[0] and Grasshopper[1] [0] https://dynamobim.org https://dynamobim.org [1] https://www.grasshopper3d.com https://www.grasshopper3d.com
- fayten 4y ago
  The blender game engine, Armory3d, supports node based scripting as well. https://armory3d.org/features#scripting https://armory3d.org/features#scripting https://github.com/armory3d/armory/wiki/Introduction-to-Logic-Nodes https://github.com/armory3d/armory/wiki/Introduction-to-Logi...
jcelerier 4y ago
You can add https://ossia.io https://ossia.io which (as its author) I believe is fairly unique in combining node-based and timeline directly in the same UI :)
- moklick 4y ago
  woow! This is so good! Just added it.
  - jcelerier 4y ago
    thanks for adding it! I find so interesting in terms of how we market it that you added it to the "3D & visuals" category, when it had audio features before even being able to display anything haha
    - moklick 4y ago
      hehe good point :D I'll add it to audio
      - jcelerier 4y ago
        Ah but it's interesting, because it means that this is what people think about first when looking the website so we may have to rework it a bit
- whizzter 4y ago
  It looks like an interesting approach, gonna take a deeper peek at it. Any particular reason for the player part to be LGPL rather than something more permissive? Don't see the player portions being badly appropriated or fork-extended commercially w/o the main tool that definetly should remain GPL:ed. (I'm still active in the demoscene doing 64k's where exe-compression usually works with single exe's)
  - jcelerier 4y ago
    If it was up to me it'd actually be at least GPLv3 and likely AGPL haha but many were involved in licensing choices and this is where the common ground landed. And the player is what actually contains most of the interesting algorithmic "meat" ; a company could build a custom DAW on top of it without much trouble for instance.
vnorilo 4y ago
I guess this is where I shamelessly plug mine ;) https://kronoslang.io/veneer/tour https://kronoslang.io/veneer/tour (music DSP patcher with a WASM JIT in browser)
- moklick 4y ago
  super cool :) Added!
melony 4y ago
Retool Workflows
- datasert 4y ago
  It looks nice but not sure if their component is open source or if it is built any of the existing open source libs.
escot 4y ago
Plug: Im making a keyboard-centric flowchart editor designed for speed. Its node/wires but instead of being a canvas and mouse interaction, its a grid like a spreadsheet and has navigation and selection like a spreadsheet. Free to use (below). It would go in the Diagramming section. https://www.knotend.com https://www.knotend.com
- moklick 4y ago
  I like this! The UX is quite unique. Added it to diagramming.
  - escot 4y ago
    Thanks! I just put up a PR for formatting the link.
- jononor 4y ago
  Very glad to see this get some focus! I wanted the same back when I worked on Flowhub.
  - escot 4y ago
    The cannnabis co? What were you using flowcharts for?
    - jononor 4y ago
      Haha no, the other Flowhub :p http://flowhub.io http://flowhub.io
catapart 4y ago
Shameless plug time! I've been working on something like this as a custom web component with no dependencies: https://github.com/catapart/Magnit.NodeGraph https://github.com/catapart/Magnit.NodeGraph Not the most feature rich - I'm developing it for a single project, so that's project's needs come first. But it's rudimentary enough to start from if you're looking to build your own, and it's simple enough to customize if it already does what you need.
fuzzy2 4y ago
My previous employer also had a (proprietary) data transformation system like that, with a column-oriented table data structure and lazy evaluation. It was also part of a larger hierarchical system of (table) data sources and sinks. Powerful stuff.
tonerow 4y ago
Should this list include text-to-node utils? Things like... - Graphviz (https://graphviz.org/ https://graphviz.org/) - Mermaid-js (https://mermaid.live/ https://mermaid.live/) - Flowchart Fun (https://flowchart.fun/ https://flowchart.fun/)
- moklick 4y ago
  thanks! added.
hellocinations 4y ago
Bespoke Synth (https://www.bespokesynth.com/ https://www.bespokesynth.com/) is another cool open source node-based synthesizer.
- moklick 4y ago
  added
SpaceL10n 4y ago
Some of the tools listed here look like this one: https://nodes.io https://nodes.io
frading 4y ago
I invite you to add https://polygonjs.com https://polygonjs.com, which is fully node-based (I'm the author). You can create procedural geometry, shaders, behaviors, with just nodes. It is inspired by Houdini/Nuke/Unreal. The main engine is open source ( https://github.com/polygonjs/polygonjs https://github.com/polygonjs/polygonjs ) and there are more and more examples ( https://polygonjs.com/examples/ https://polygonjs.com/examples/ ) (edit - oh, it was already there! thank you!)
- moklick 4y ago
  Polygonjs looks super slick!
  - frading 4y ago
    Thanks a lot!
johnofthesea 4y ago
For DSP there is also: https://puredata.info https://puredata.info https://en.wikipedia.org/wiki/Pure_Data https://en.wikipedia.org/wiki/Pure_Data
solardev 4y ago
I was so happy to see that these are UIs for graph/diagram nodes, not Node.js! Way cooler.
- moklick 4y ago
  I added the header image just to avoid any confusion about node.js :D
stevebmark 4y ago
Maybe add GitHub stars to this list? React Flow stands far above most (all?) of these in terms of use, maturity, and community, but it doesn’t stand out in the list.
- oregano 4y ago
  The repo owner of this collection is also the creator of React Flow fyi. He probably wasn’t trying to show off but provide a list for people to browse and decide for themselves.
  - moklick 4y ago
    yep! That's the point.
7952 4y ago
FME deserves a mention, an ETL aimed at GIS data. It is the only automation tool I have ever used that doesn't make me want to switch to code. Everything can output to a node which makes it easier to understand errors. And every stage of processing can be inspected.
- moklick 4y ago
  I'll add it. Carto just released a workflow editor for GIS data: https://carto.com/blog/introducing-carto-workflows/ https://carto.com/blog/introducing-carto-workflows/
- hermitcrab 4y ago
  >And every stage of processing can be inspected. Isn't this the case for every node-based ETL tool?
porcc 4y ago
TouchDesigner!
- porcc 4y ago
  Also Natron! https://natrongithub.github.io/ https://natrongithub.github.io/ https://derivative.ca/UserGuide/TouchDesigner https://derivative.ca/UserGuide/TouchDesigner
  - porcc 4y ago
    Also Notch! https://www.notch.one/ https://www.notch.one/
mroche 4y ago
Pretty much most M&E oriented tools can be added to this list for the 3D and Visuals section. We live for nodes!
simonsarris 4y ago
I made a pull request for GoJS (https://gojs.net https://gojs.net) I have been building this canvas-based graphing library since 2011, and it contains a good number of features around customization and interactivity that are not found in other libraries. It is commercial for non-academic use however.
- deleted 4y ago
  [deleted]
- klysm 4y ago
  The pricing structure made it really hard to choose for a startup, if there was a more tiered approach allow easier adoption. It looks great for our use case, but we ended up using other tools.
bevenky 4y ago
Cool collection of elements here to browse
tdjsnelling 4y ago
I have recently implemented a fairly complex workflow editor [1] at Northflank (https://northflank.com https://northflank.com) using react-flow and elkjs. They make for a very powerful and flexible combination, great for our needs. [1] https://i.imgur.com/gENveM4.png https://i.imgur.com/gENveM4.png
ilaksh 4y ago
Do any of these systems have a way of encapsulating portions of graphs so they can be reused?
zamalek 4y ago
Are any of these accessible? I noticed many of them are canvas-based (especially the fancier looking ones).
- hermitcrab 4y ago
  Can you elaborate? Accessible is a big topic.
  - zamalek 4y ago
    Could a blind person use any of these? Are there any that a blind person could?
tabtab 4y ago
I'm looking for a library that draws lines and arrows between boxes, but the boxes can generally be plain old div's or iframe's. HTML can do the box content, it's just the lines & arrows that are the hard part. The box connection can be the 8 compass references: N,E,S,W,NE,SE,SW,NW
CrypticShift 4y ago
Some Additional Local Data Processing Soft I use : - Data preparation : https://easymorph.com/ https://easymorph.com/ - Data transformation : https://www.easydatatransform.com/ https://www.easydatatransform.com/ Also general purpose visual/dataflow python scripting like ryven.org and PyFlow
Twistyfiasco 4y ago
Would you consider Labview [1] node based ui? [1]https://www.ni.com/en-ca/shop/labview.html https://www.ni.com/en-ca/shop/labview.html
hermitcrab 4y ago
I have written 2 products with node-based UIs. https://www.easydatatransform.com https://www.easydatatransform.com : A node based data transformation (ETL) tool where nodes are inputs, transformations (61 to choose from) and outputs. https://www.hyperplan.com https://www.hyperplan.com : A card-based task planner. The Professional edition supports drawing connections between tools (e.g. dependencies). It will auto-layout a graph based on the connections (which was a challenging bit of programming).

194 points by moklick 4y ago

Just open an issue or PR or leave a comment here if you have any suggestions for the list :)

I always wanted to find a nice Vanilla JS library that provided a base for what essentially is UE's Blueprints or the old Yahoo! Pipes.

moklick 4y ago
the docs are missing but this looks good https://github.com/jagenjo/litegraph.js https://github.com/jagenjo/litegraph.js
catapart 4y ago
This is VERY anemic, as far as features go, but if you're just looking for something easy to understand that uses native web features (vanilla js and web components), I've built a starting point: https://catapart.github.io/Magnit.NodeGraph/ https://catapart.github.io/Magnit.NodeGraph/

bhouston 4y ago

Don't forget behave-graph/behave-flow, the Unreal Engine Blueprints / Unity Visual Script like interaction/behavior system: https://github.com/bhouston/behave-graph https://github.com/bhouston/behave-graph https://github.com/beeglebug/behave-flow https://github.com/beeglebug/behave-flow

moklick 4y ago
added!

deleted 4y ago

[deleted]

brasetvik 4y ago

I think Blender is worth an honerable mention. :) Geometry nodes, part of «everything Nodes», is pretty interesting: https://youtu.be/kMDB7c0ZiKA https://youtu.be/kMDB7c0ZiKA

moklick 4y ago
Good point. If we add blender we also have to add Houdini I guess :D
- jasonjamerson 4y ago
  Da Vinci Resolve, Unreal Engine, everything is going node based.
  - lattalayta 4y ago
    Agreed, many VFX graphics programs are node based - two more would be Nuke and Katana from The Foundry. Natron would be an open source clone of Nuke, similar to how Gaffer is essentially an open source clone of Katana
- johnofthesea 4y ago
  Also Dynamo[0] and Grasshopper[1] [0] https://dynamobim.org https://dynamobim.org [1] https://www.grasshopper3d.com https://www.grasshopper3d.com
fayten 4y ago
The blender game engine, Armory3d, supports node based scripting as well. https://armory3d.org/features#scripting https://armory3d.org/features#scripting https://github.com/armory3d/armory/wiki/Introduction-to-Logic-Nodes https://github.com/armory3d/armory/wiki/Introduction-to-Logi...

jcelerier 4y ago

You can add https://ossia.io https://ossia.io which (as its author) I believe is fairly unique in combining node-based and timeline directly in the same UI :)

moklick 4y ago
woow! This is so good! Just added it.
- jcelerier 4y ago
  thanks for adding it! I find so interesting in terms of how we market it that you added it to the "3D & visuals" category, when it had audio features before even being able to display anything haha
  - moklick 4y ago
    hehe good point :D I'll add it to audio
    - jcelerier 4y ago
      Ah but it's interesting, because it means that this is what people think about first when looking the website so we may have to rework it a bit
whizzter 4y ago
It looks like an interesting approach, gonna take a deeper peek at it. Any particular reason for the player part to be LGPL rather than something more permissive? Don't see the player portions being badly appropriated or fork-extended commercially w/o the main tool that definetly should remain GPL:ed. (I'm still active in the demoscene doing 64k's where exe-compression usually works with single exe's)
- jcelerier 4y ago
  If it was up to me it'd actually be at least GPLv3 and likely AGPL haha but many were involved in licensing choices and this is where the common ground landed. And the player is what actually contains most of the interesting algorithmic "meat" ; a company could build a custom DAW on top of it without much trouble for instance.

vnorilo 4y ago

I guess this is where I shamelessly plug mine ;) https://kronoslang.io/veneer/tour https://kronoslang.io/veneer/tour (music DSP patcher with a WASM JIT in browser)

moklick 4y ago
super cool :) Added!

melony 4y ago

Retool Workflows

datasert 4y ago
It looks nice but not sure if their component is open source or if it is built any of the existing open source libs.

escot 4y ago

Plug: Im making a keyboard-centric flowchart editor designed for speed. Its node/wires but instead of being a canvas and mouse interaction, its a grid like a spreadsheet and has navigation and selection like a spreadsheet. Free to use (below). It would go in the Diagramming section. https://www.knotend.com https://www.knotend.com

moklick 4y ago
I like this! The UX is quite unique. Added it to diagramming.
- escot 4y ago
  Thanks! I just put up a PR for formatting the link.
jononor 4y ago
Very glad to see this get some focus! I wanted the same back when I worked on Flowhub.
- escot 4y ago
  The cannnabis co? What were you using flowcharts for?
  - jononor 4y ago
    Haha no, the other Flowhub :p http://flowhub.io http://flowhub.io

catapart 4y ago

Shameless plug time! I've been working on something like this as a custom web component with no dependencies: https://github.com/catapart/Magnit.NodeGraph https://github.com/catapart/Magnit.NodeGraph Not the most feature rich - I'm developing it for a single project, so that's project's needs come first. But it's rudimentary enough to start from if you're looking to build your own, and it's simple enough to customize if it already does what you need.

fuzzy2 4y ago

My previous employer also had a (proprietary) data transformation system like that, with a column-oriented table data structure and lazy evaluation. It was also part of a larger hierarchical system of (table) data sources and sinks. Powerful stuff.

tonerow 4y ago

Should this list include text-to-node utils? Things like... - Graphviz (https://graphviz.org/ https://graphviz.org/) - Mermaid-js (https://mermaid.live/ https://mermaid.live/) - Flowchart Fun (https://flowchart.fun/ https://flowchart.fun/)

moklick 4y ago
thanks! added.

hellocinations 4y ago

Bespoke Synth (https://www.bespokesynth.com/ https://www.bespokesynth.com/) is another cool open source node-based synthesizer.

moklick 4y ago
added

SpaceL10n 4y ago

Some of the tools listed here look like this one: https://nodes.io https://nodes.io

frading 4y ago

I invite you to add https://polygonjs.com https://polygonjs.com, which is fully node-based (I'm the author). You can create procedural geometry, shaders, behaviors, with just nodes. It is inspired by Houdini/Nuke/Unreal. The main engine is open source ( https://github.com/polygonjs/polygonjs https://github.com/polygonjs/polygonjs ) and there are more and more examples ( https://polygonjs.com/examples/ https://polygonjs.com/examples/ ) (edit - oh, it was already there! thank you!)

moklick 4y ago
Polygonjs looks super slick!
- frading 4y ago
  Thanks a lot!

johnofthesea 4y ago

For DSP there is also: https://puredata.info https://puredata.info https://en.wikipedia.org/wiki/Pure_Data https://en.wikipedia.org/wiki/Pure_Data

solardev 4y ago

I was so happy to see that these are UIs for graph/diagram nodes, not Node.js! Way cooler.

moklick 4y ago
I added the header image just to avoid any confusion about node.js :D

stevebmark 4y ago

Maybe add GitHub stars to this list? React Flow stands far above most (all?) of these in terms of use, maturity, and community, but it doesn’t stand out in the list.

oregano 4y ago
The repo owner of this collection is also the creator of React Flow fyi. He probably wasn’t trying to show off but provide a list for people to browse and decide for themselves.
- moklick 4y ago
  yep! That's the point.

7952 4y ago

FME deserves a mention, an ETL aimed at GIS data. It is the only automation tool I have ever used that doesn't make me want to switch to code. Everything can output to a node which makes it easier to understand errors. And every stage of processing can be inspected.

moklick 4y ago
I'll add it. Carto just released a workflow editor for GIS data: https://carto.com/blog/introducing-carto-workflows/ https://carto.com/blog/introducing-carto-workflows/
hermitcrab 4y ago
>And every stage of processing can be inspected. Isn't this the case for every node-based ETL tool?

porcc 4y ago

TouchDesigner!

porcc 4y ago
Also Natron! https://natrongithub.github.io/ https://natrongithub.github.io/ https://derivative.ca/UserGuide/TouchDesigner https://derivative.ca/UserGuide/TouchDesigner
- porcc 4y ago
  Also Notch! https://www.notch.one/ https://www.notch.one/

mroche 4y ago

Pretty much most M&E oriented tools can be added to this list for the 3D and Visuals section. We live for nodes!

simonsarris 4y ago

I made a pull request for GoJS (https://gojs.net https://gojs.net) I have been building this canvas-based graphing library since 2011, and it contains a good number of features around customization and interactivity that are not found in other libraries. It is commercial for non-academic use however.

deleted 4y ago
[deleted]
klysm 4y ago
The pricing structure made it really hard to choose for a startup, if there was a more tiered approach allow easier adoption. It looks great for our use case, but we ended up using other tools.

bevenky 4y ago

Cool collection of elements here to browse

tdjsnelling 4y ago

I have recently implemented a fairly complex workflow editor [1] at Northflank (https://northflank.com https://northflank.com) using react-flow and elkjs. They make for a very powerful and flexible combination, great for our needs. [1] https://i.imgur.com/gENveM4.png https://i.imgur.com/gENveM4.png

ilaksh 4y ago

Do any of these systems have a way of encapsulating portions of graphs so they can be reused?

zamalek 4y ago

Are any of these accessible? I noticed many of them are canvas-based (especially the fancier looking ones).

hermitcrab 4y ago
Can you elaborate? Accessible is a big topic.
- zamalek 4y ago
  Could a blind person use any of these? Are there any that a blind person could?

tabtab 4y ago

I'm looking for a library that draws lines and arrows between boxes, but the boxes can generally be plain old div's or iframe's. HTML can do the box content, it's just the lines & arrows that are the hard part. The box connection can be the 8 compass references: N,E,S,W,NE,SE,SW,NW

CrypticShift 4y ago

Some Additional Local Data Processing Soft I use : - Data preparation : https://easymorph.com/ https://easymorph.com/ - Data transformation : https://www.easydatatransform.com/ https://www.easydatatransform.com/ Also general purpose visual/dataflow python scripting like ryven.org and PyFlow

Twistyfiasco 4y ago

Would you consider Labview [1] node based ui? [1]https://www.ni.com/en-ca/shop/labview.html https://www.ni.com/en-ca/shop/labview.html

hermitcrab 4y ago

I have written 2 products with node-based UIs. https://www.easydatatransform.com https://www.easydatatransform.com : A node based data transformation (ETL) tool where nodes are inputs, transformations (61 to choose from) and outputs. https://www.hyperplan.com https://www.hyperplan.com : A card-based task planner. The Professional edition supports drawing connections between tools (e.g. dependencies). It will auto-layout a graph based on the connections (which was a challenging bit of programming).