Awesome Node-Based UIs | Hacker News Reader

Awesome Node-Based UIs

github.com

194 pointsmoklick68 comments

I invite you to add 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 ) and there are more and more examples ( https://polygonjs.com/examples/ )

(edit - oh, it was already there! thank you!)

Polygonjs looks super slick!

Thanks a lot!

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

woow! This is so good! Just added it.

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

hehe good point :D I'll add it to audio

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

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)

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.

Hmm, maybe you're right. I was mostly considering the parts needed for me (linear-replay) but I guess when you have OSC,Midi and all other kinds of integrations there's a lot more integration code weight.

Though from experience with my own tools, I suspect that in the end the UI code for the tool will outweight most other parts in the end.

Yes, there's definitely more UI code (roughly 20% of the total is engine code). But it's also a much, much easier code to write than the engine code which has to be threadsafe, has to perform no allocations as far as is possible, comes with various graph algorithms, etc

At least you don't have to write your own DOS extenders nowadays :)

Haha, spilling my old dirty secrets eh ;D

I have recently implemented a fairly complex workflow editor [1] at Northflank (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

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

I like this! The UX is quite unique. Added it to diagramming.

Thanks! I just put up a PR for formatting the link.

Very glad to see this get some focus! I wanted the same back when I worked on Flowhub.

The cannnabis co? What were you using flowcharts for?

Haha no, the other Flowhub :p http://flowhub.io

I think Blender is worth an honerable mention. :)

Geometry nodes, part of «everything Nodes», is pretty interesting: https://youtu.be/kMDB7c0ZiKA

Good point. If we add blender we also have to add Houdini I guess :D

Da Vinci Resolve, Unreal Engine, everything is going node based.

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

Also Dynamo[0] and Grasshopper[1]

[0] https://dynamobim.org

[1] https://www.grasshopper3d.com

The blender game engine, Armory3d, supports node based scripting as well.

https://armory3d.org/features#scripting

https://github.com/armory3d/armory/wiki/Introduction-to-Logi...

I guess this is where I shamelessly plug mine ;)

https://kronoslang.io/veneer/tour

(music DSP patcher with a WASM JIT in browser)

super cool :) Added!

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

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

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

added

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/beeglebug/behave-flow

added!

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.

the docs are missing but this looks good https://github.com/jagenjo/litegraph.js

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/

Some Additional Local Data Processing Soft I use :

- Data preparation : https://easymorph.com/

- Data transformation : https://www.easydatatransform.com/

Also general purpose visual/dataflow python scripting like ryven.org and PyFlow

Should this list include text-to-node utils? Things like...

- Graphviz (https://graphviz.org/)

- Mermaid-js (https://mermaid.live/)

- Flowchart Fun (https://flowchart.fun/)

thanks! added.

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

I made a pull request for GoJS (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.

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.

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

For DSP there is also: https://puredata.info

https://en.wikipedia.org/wiki/Pure_Data

I have written 2 products with node-based UIs.

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 : 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).

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

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.

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.

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.

yep! That's the point.

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

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.

I'll add it. Carto just released a workflow editor for GIS data: https://carto.com/blog/introducing-carto-workflows/

>And every stage of processing can be inspected.

Isn't this the case for every node-based ETL tool?

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.

Would you consider Labview [1] node based ui?

[1]https://www.ni.com/en-ca/shop/labview.html

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

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

Can you elaborate? Accessible is a big topic.

Could a blind person use any of these? Are there any that a blind person could?

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

Retool Workflows

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

Cool collection of elements here to browse

TouchDesigner!

Also Natron!

https://natrongithub.github.io/

https://derivative.ca/UserGuide/TouchDesigner

Also Notch!

https://www.notch.one/

Reply on news.ycombinator.com