# How to kick start to create grid based flow-editor like Node-Red to play with my own nodes
**URL:** https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022
**Category:** General
**Created:** [5 April 2024 05:37 UTC](https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022 "2024-04-05T05:37:36Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@k-usama1495](https://discourse.nodered.org/u/k-usama1495)
#### Post date: [5 April 2024 05:37 UTC](https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022/1 "2024-04-05T05:37:36Z")
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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 April 2024 12:31 UTC](https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022/2 "2024-04-05T12:31:33Z")
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.
> [@k-usama1495](#):
>
> Node Red using GRID like background image just for helping users align nodes and create flows more easily.
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).
> [@k-usama1495](#):
>
> Node-RED using SVG's
Yes, the Editor uses SVG's extensively.
Here you can see the SVG that defines the main panel and can clearly see the grid:
---
### Author:  [@k-usama1495](https://discourse.nodered.org/u/k-usama1495)
#### Post date: [26 April 2024 04:30 UTC](https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022/3 "2024-04-26T04:30:53Z")
Thanks a lot, for clearing my doubt.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 July 2024 04:31 UTC](https://discourse.nodered.org/t/how-to-kick-start-to-create-grid-based-flow-editor-like-node-red-to-play-with-my-own-nodes/87022/4 "2024-07-25T04:31:36Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.