What approach to use to create a visual designer?

Question

JavaScript

Hello! Please tell me where to start. The task is as follows: Suppose we have a certain sidebar with dragndrop components that can be dragged onto the grid, visually build a hierarchy or link them to each other. Some components can be text, etc. Some will be logical, depending on the user's input, fulfill one of the conditions and go to the corresponding block. The image below explains it.

I found a solution for the grid: https://interactjs.io/
I would like to save all the data in JSON.

I understand that the question is quite abstract, tell me where to dig and what you can read. How can this project be implemented? What libraries can be viewed? And on the connection of components and compilation of JSON, I would like some best practices.

Answer 1

thank you golentor for your reply. In my free time, I write the front for personal projects, I try to actively use Vue, where would it be without it)
If, according to the current status of resolving the issue, then so far it looks like this:

• After some research, it turned out that I did not quite understand the work of JS with the DOM.
  
• Also, for more freedom and control, I decided to switch from the standard dragndrop to my own, based on mouseevents ( https://learn.javascript.ru/mouse-drag-and-drop ).
  
• With the grid, too, everything turned out to be easier, CSS lined the grid by points, and when I release the block (mouseup), I calculate the nearest distance to the point and move it there. So there were no extra libraries.
  
• I will store the data in attributes, iterate over the elements (I still need to think about this) and save it in one of the formats.
  

In general, I slowly decided to build a base on Vanilla and migrate to Vue using components.
As for graphQL, thanks, I'll read it. And I'm afraid that ready-made solutions will not work, I have to remake a lot for myself.
Now one of the issues that came up was moving multiple added elements when an element is added between them. Or, when adding several branches (if-else-...), we visually grow the tree, and if such complex conditions are at the lower levels, they will move all elements of the tree from above. In general, I still don’t know how to solve this, maybe there are ideas?) As for coding together, I’m not against a common repo)
PS I probably hurried about the question, we should at least get down to this problem and ask more constructive questions)

Answer 2

I'm probably not a strong expert in visual constructors, and judging by your signature, you are still a Go developer, so Vue is unlikely to suit you.
I advise you to dig in the direction of graphQL (JSON is already morally obsolete)
You can view from the finished one Elementor under Wordpress. Under WP, you can find several such constructors.
graphQL is attached to Gou in an elementary way.
As a client, apparently a bunch of docker - Vue - vuetify will suit you (everything without it - nowhere).
At one time, I started to cut my vezhel constructor on Vue, so if you want, you can code together - good designers in the world of the web - just can't be counted on fingers)