TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Awesome Node-Based UIs

194 pointsby moklickover 2 years ago

29 comments

fradingover 2 years ago
I invite you to add <a href="https:&#x2F;&#x2F;polygonjs.com" rel="nofollow">https:&#x2F;&#x2F;polygonjs.com</a>, which is fully node-based (I&#x27;m the author). You can create procedural geometry, shaders, behaviors, with just nodes.<p>It is inspired by Houdini&#x2F;Nuke&#x2F;Unreal. The main engine is open source ( <a href="https:&#x2F;&#x2F;github.com&#x2F;polygonjs&#x2F;polygonjs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;polygonjs&#x2F;polygonjs</a> ) and there are more and more examples ( <a href="https:&#x2F;&#x2F;polygonjs.com&#x2F;examples&#x2F;" rel="nofollow">https:&#x2F;&#x2F;polygonjs.com&#x2F;examples&#x2F;</a> )<p>(edit - oh, it was already there! thank you!)
评论 #33641371 未加载
jcelerierover 2 years ago
You can add <a href="https:&#x2F;&#x2F;ossia.io" rel="nofollow">https:&#x2F;&#x2F;ossia.io</a> which (as its author) I believe is fairly unique in combining node-based and timeline directly in the same UI :)
评论 #33641852 未加载
评论 #33640631 未加载
tdjsnellingover 2 years ago
I have recently implemented a fairly complex workflow editor [1] at Northflank (<a href="https:&#x2F;&#x2F;northflank.com" rel="nofollow">https:&#x2F;&#x2F;northflank.com</a>) using react-flow and elkjs. They make for a very powerful and flexible combination, great for our needs.<p>[1] <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;gENveM4.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;gENveM4.png</a>
escotover 2 years ago
Plug: Im making a keyboard-centric flowchart editor designed for speed. Its node&#x2F;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.<p><a href="https:&#x2F;&#x2F;www.knotend.com" rel="nofollow">https:&#x2F;&#x2F;www.knotend.com</a>
评论 #33652806 未加载
评论 #33640771 未加载
brasetvikover 2 years ago
I think Blender is worth an honerable mention. :)<p>Geometry nodes, part of «everything Nodes», is pretty interesting: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;kMDB7c0ZiKA" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;kMDB7c0ZiKA</a>
评论 #33641797 未加载
评论 #33640691 未加载
vnoriloover 2 years ago
I guess this is where I shamelessly plug mine ;)<p><a href="https:&#x2F;&#x2F;kronoslang.io&#x2F;veneer&#x2F;tour" rel="nofollow">https:&#x2F;&#x2F;kronoslang.io&#x2F;veneer&#x2F;tour</a><p>(music DSP patcher with a WASM JIT in browser)
评论 #33640679 未加载
solardevover 2 years ago
I was so happy to see that these are UIs for graph&#x2F;diagram nodes, not Node.js! Way cooler.
评论 #33641773 未加载
hellocinationsover 2 years ago
Bespoke Synth (<a href="https:&#x2F;&#x2F;www.bespokesynth.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.bespokesynth.com&#x2F;</a>) is another cool open source node-based synthesizer.
评论 #33641102 未加载
bhoustonover 2 years ago
Don&#x27;t forget behave-graph&#x2F;behave-flow, the Unreal Engine Blueprints &#x2F; Unity Visual Script like interaction&#x2F;behavior system:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;bhouston&#x2F;behave-graph" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bhouston&#x2F;behave-graph</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;beeglebug&#x2F;behave-flow" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;beeglebug&#x2F;behave-flow</a>
评论 #33640375 未加载
jakearmitageover 2 years ago
I always wanted to find a nice Vanilla JS library that provided a base for what essentially is UE&#x27;s Blueprints or the old Yahoo! Pipes.
评论 #33640815 未加载
评论 #33640408 未加载
CrypticShiftover 2 years ago
Some Additional Local Data Processing Soft I use :<p>- Data preparation : <a href="https:&#x2F;&#x2F;easymorph.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;easymorph.com&#x2F;</a><p>- Data transformation : <a href="https:&#x2F;&#x2F;www.easydatatransform.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.easydatatransform.com&#x2F;</a><p>Also general purpose visual&#x2F;dataflow python scripting like ryven.org and PyFlow
tonerowover 2 years ago
Should this list include text-to-node utils? Things like...<p>- Graphviz (<a href="https:&#x2F;&#x2F;graphviz.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;graphviz.org&#x2F;</a>)<p>- Mermaid-js (<a href="https:&#x2F;&#x2F;mermaid.live&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mermaid.live&#x2F;</a>)<p>- Flowchart Fun (<a href="https:&#x2F;&#x2F;flowchart.fun&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flowchart.fun&#x2F;</a>)
评论 #33641337 未加载
SpaceL10nover 2 years ago
Some of the tools listed here look like this one: <a href="https:&#x2F;&#x2F;nodes.io" rel="nofollow">https:&#x2F;&#x2F;nodes.io</a>
simonsarrisover 2 years ago
I made a pull request for GoJS (<a href="https:&#x2F;&#x2F;gojs.net" rel="nofollow">https:&#x2F;&#x2F;gojs.net</a>)<p>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.
评论 #33643174 未加载
评论 #33643124 未加载
moklickover 2 years ago
Just open an issue or PR or leave a comment here if you have any suggestions for the list :)
johnoftheseaover 2 years ago
For DSP there is also: <a href="https:&#x2F;&#x2F;puredata.info" rel="nofollow">https:&#x2F;&#x2F;puredata.info</a><p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Pure_Data" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Pure_Data</a>
hermitcrabover 2 years ago
I have written 2 products with node-based UIs.<p><a href="https:&#x2F;&#x2F;www.easydatatransform.com" rel="nofollow">https:&#x2F;&#x2F;www.easydatatransform.com</a> : A node based data transformation (ETL) tool where nodes are inputs, transformations (61 to choose from) and outputs.<p><a href="https:&#x2F;&#x2F;www.hyperplan.com" rel="nofollow">https:&#x2F;&#x2F;www.hyperplan.com</a> : 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).
catapartover 2 years ago
Shameless plug time! I&#x27;ve been working on something like this as a custom web component with no dependencies: <a href="https:&#x2F;&#x2F;github.com&#x2F;catapart&#x2F;Magnit.NodeGraph" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;catapart&#x2F;Magnit.NodeGraph</a><p>Not the most feature rich - I&#x27;m developing it for a single project, so that&#x27;s project&#x27;s needs come first. But it&#x27;s rudimentary enough to start from if you&#x27;re looking to build your own, and it&#x27;s simple enough to customize if it already does what you need.
stevebmarkover 2 years 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.
评论 #33642512 未加载
tabtabover 2 years ago
I&#x27;m looking for a library that draws lines and arrows between boxes, but the boxes can generally be plain old div&#x27;s or iframe&#x27;s. HTML can do the box content, it&#x27;s just the lines &amp; arrows that are the hard part. The box connection can be the 8 compass references: N,E,S,W,NE,SE,SW,NW
7952over 2 years ago
FME deserves a mention, an ETL aimed at GIS data. It is the only automation tool I have ever used that doesn&#x27;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.
评论 #33641969 未加载
评论 #33651971 未加载
fuzzy2over 2 years 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.
Twistyfiascoover 2 years ago
Would you consider Labview [1] node based ui?<p>[1]<a href="https:&#x2F;&#x2F;www.ni.com&#x2F;en-ca&#x2F;shop&#x2F;labview.html" rel="nofollow">https:&#x2F;&#x2F;www.ni.com&#x2F;en-ca&#x2F;shop&#x2F;labview.html</a>
mrocheover 2 years ago
Pretty much most M&amp;E oriented tools can be added to this list for the 3D and Visuals section. We live for nodes!
zamalekover 2 years ago
Are any of these accessible? I noticed many of them are canvas-based (especially the fancier looking ones).
评论 #33651983 未加载
ilakshover 2 years ago
Do any of these systems have a way of encapsulating portions of graphs so they can be reused?
melonyover 2 years ago
Retool Workflows
评论 #33641906 未加载
bevenkyover 2 years ago
Cool collection of elements here to browse
porccover 2 years ago
TouchDesigner!
评论 #33641986 未加载