Any method to do interactive node and graph diagrams in LiveView?

I am looking for any possible method or library to do interactive node and graph diagrams in LiveView. By “interactive node and graph diagrams”, think TouchDesigner, vvvv, Pure Data, and various other node-based interactive applications.

I am new to LiveView and web-based frontend development but not Elixir or general GUI development. Probably the main thing that is needed is strong support for drag-and-drop behavior and canvas-like drawing to connect and layout the various nodes.

Is there anything out there for LiveView that can help with this? Thank you!

I am not aware of any pure liveview project. However, if you are open to the idea of using React, I would suggest looking into this project (OpenFn/Lightning) on GitHub. It has a node-based editor that relies of React Flow (https://reactflow.dev/). I haven’t used it personally. I just came across it while searching for Elixir/Phoenix projects on GitHub.

1 Like