How to kick start to create grid based flow-editor like Node-Red to play with my own nodes

I am impressed with Node Red interactive Flow Editor. I have to develop same flow editor for learning purpose. After some RND I found these things
1 - Node Red using GRID like background image just for helping users align nodes and create flows more easily.
2 - Node-RED using SVG's
Note: If I am wrong please guide me write path to learn these things. I have to learn any how

The Editor's main panel uses a combination of helper libraries. Probably the most critical being D3.js

D3 is a library designed to make complex graphical web UI's a bit easier to work with.

Without looking at the code, I couldn't say how the optional grid is displayed. It won't be "an image" though, it will most likely be an SVG pattern generated by D3 (though that's a guess).

Yes, the Editor uses SVG's extensively.

Here you can see the SVG that defines the main panel and can clearly see the grid:

1 Like

Thanks a lot, for clearing my doubt.