Web-based Node Editor

Hi all,
I'm looking for an open-source web-based node editor, like node editors inside the Houdini, Unreal Engine, Unity, Blender, ... (probably based on WebGL or HTML5 or SVG or any other solutions)
Please if you find any stable solution share with
Thank you,
Ehsan

Comments

  • What about NODE-Red that you mentioned in the other thread? I cloned the repo and played a bit with it, it looks pretty nice

  • edited June 2020

    Opps no okay that is a different thing

  • edited June 2020

    @Jesusbill do you think its UI is extendable? If we could extend its nodes to become like Blender nodes, I think Node-RED could be a good choice (Node-RED nodes are just objects/classes which makes it a little bit traditional)

    Even, I think, if you're interested we can build a test node based on ThreeJS or D3JS
    I found this too, which is interesting, but is too old and abandoned: http://idflood.github.io/ThreeNodes.js/

  • Yes it is extendable https://nodered.org/docs/creating-nodes/. Also there is a dedicated repo for additional nodes https://github.com/node-red/node-red-nodes

    I am running a small example now and will report (a simple json file loading/modification/saving). i definitely like the look n feel of NODE-Red and the fact that is pure Javacript, I had it up and running in seconds.

    ThreeNodes looks nice as well but it would probably need more effort to update it to current versions, I will try to give it a go when I find some extra time

    ReD_CoDE
  • The Node-RED library looks fine - I haven't investigated others but I don't see why it can't do what you're asking - a client-side node renderer is a very lightweight script and shouldn't affect any other part of processing you wish to do.

  • I did this small experiment (load input.json -> modify it -> save output.json) and the user experience was quite good. I like it!

    MoultReD_CoDEcarlopav
  • @Moult I want to have buttons, sliders, checkers, pickers, ... all part of "component" nodes, not just a simple node as an object/class
    See this:

    So if you both think it's easy to build such component nodes, so let's work on it

  • I can't speak for @Jesusbill but I've got a few other priorities to develop, but I'd be happy to watch the progress :)

    Why don't you try pick up some programming? Javascript is as good as any language to start with.

  • edited June 2020

    @Moult I have team, but these are all open and personal efforts and I want to share my ideas and anyone prefers we work on them as a team
    I do this on LinkedIn too

    "I see forums as a way for constant learning and finding best friends and even future teammates"

    Please share those few priorities
    Choosing a solution needs time, needs, first of all, we know "requirements" then "functionalities" then "functional research" then choosing the best one and start to develop it

    I like what @Jesusbill does, he learns too, from working on different ideas and possibilities (do you think based on VueJS and bootstrap (or even maybe WebGL/ThreeJS/D3JS) we can build "component" nodes?)

  • @ReD_CoDE I guess I can help with the experimentation, I don't have much "free" time but visual programming is something that has my attention.

  • edited June 2020

    Thanks Ioannis,
    I found two other node editors too:
    https://webglstudio.org/
    https://victhorlopez.github.io/editor/

    Some thoughts:
    1. Node-RED is a mature solution in flow-based area, and has a good interface, however I think its simple nodes cause inefficiency when the number of nodes growth
    2. Those two WebGL-based projects are interesting but at the moment I don't have any plan for the whole solution and I just want their node and code solutions
    3. How about combining nodes from Node-RED with interface from WebGL Studio?

  • @ReD_CoDE I have been playing around with the links you provided.
    -> I agree that node-red is more tailored for workflows and it does not seem trivial to create new nodes as you want them.
    -> I could not easily install ThreeNodes with my knowledge, it has some other dependencies and it is quite old
    -> Also the other two links seem developed for specific applications BUT from those developers I ended up in this that perhaps could be interesting although I don't understand how to run the examples ...
    https://github.com/jagenjo/litegraph.js
    demo: https://tamats.com/projects/litegraph/demo/ (right click in the main window and "Add Node")
    In any case I think a web-based node editor is not a trivial project. My best bet would be in node-red which seems the most mature and well-developed solution but it has the disadvantages said before. I believe this kind of project would need a dedicated developer with a direct interest to create it especially if there is not an existing library that can pave the way for some easy experimentation.

  • @Jesusbill if you're trying to set it up based on the first project it won't work, I don't know why, but if you download or fork the repo, I think the demo folder, which you shared its online version is a good point to start
    It has almost anything I want to build a new startup, just needs some improvements and we will work on it
    You can read and understand how it works here: view-source:https://tamats.com/projects/litegraph/demo/

    litegraph.css and litegraph.js and js/demos.js and js/code.js are the main sources, among litegraph-editor.css and litegraph-editor.js and style.css
    Other .js scripts mainly build and control extra nodes and some other features

  • @ReD_CoDE I still don't understand what the examples do but anyway, if you think it is useful for what you have in mind it is good 👍

  • @Jesusbill I can understand, the majority want traditional things, but I work on not only modern but disruptive things which is odd to many
    Just search: What's rapid prototyping?

  • edited June 2020

    All I am saying is that I would like to see a working example and from the demo page I can't make them work, like render something that is modified on the fly, if you do a simple example do share it.
    By the way from the main github page there is a link to this page where more interesting material could be found https://moiscript.weebly.com/elephant-systegraveme-nodal.html

    ReD_CoDE
  • Thanks @Jesusbill, useful website, which is exactly about rapid prototyping

  • Hello!
    Bumped into this thread while looking for something really like this! Lot of useful links here, thank you guys! 😉 Any chance of summarising or some post-mortem about this? What did you ended up with? 🤔

Sign In or Register to comment.