How to implement interactive adding of elements on the Front-end side?

Question

JavaScript

Good day!
It is necessary to implement interactive selection, addition, removal of elements. What is meant. When the button is pressed, the user enters the editing mode, in which he can add elements to the grid (this grid still needs to be implemented), and there must be a pre-prepared set of these elements (blocks with pictures). These elements can be moved, changed, deleted. After saving - exit from editing mode. These elements can be clicked to change their state (active/inactive, 2 states in total). The grid size is unlimited, and the elements must be snapped to each other (always one of the elements must touch the other). All this should look like squares on a chessboard, only the cells have more colors and the size of the field can be arbitrary.
Something can and can be done with the DOM (and perhaps even easier), but how will it behave with a 1000x1000 field, for example. Didn't work with canvas or webgl (as well as their libraries). I also want to connect this case via socket.io.
If someone has done something similar or knows links where these questions are at least partially disclosed, please share. Sources are in English.