# Which library does Node-RED use for its diagrams?

**URL:** <https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821>\
**Category:** General\
**Created:** [17 January 2022 20:47 UTC](https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821 "2022-01-17T20:47:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![richardtallent](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/richardtallent/32/54466_2.png) [@richardtallent](https://discourse.nodered.org/u/richardtallent)\
**Post date:** [17 January 2022 20:47 UTC](https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821/1 "2022-01-17T20:47:52Z")

</div>

I'm a software developer, I use Node-RED for home automation, and I'm really impressed with the UI.

Does Node-RED use an underlying npm library for its node dragging, dropping, and connecting, or is the entire thing part of this application?

I poked through the `package.json` but nothing stuck out at me. The closest open-source library I've seen that does something reasonably similar is Drawflow.

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [17 January 2022 21:33 UTC](https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821/2 "2022-01-17T21:33:10Z")

</div>

The editor is a SVG application based on D3. It's inner details come from [view.js](https://github.com/node-red/node-red/blob/310a279aaf2599032ac7de29ade3f102e1ab751e/packages/node_modules/@node-red/editor-client/src/js/ui/view.js) and the surrounding directories in the source tree.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [17 January 2022 22:50 UTC](https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821/3 "2022-01-17T22:50:31Z")

</div>

To answer directly, no, there isn't a separate npm module or reusable library. It's all part of the editor and developed by us.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 March 2022 22:50 UTC](https://discourse.nodered.org/t/which-library-does-node-red-use-for-its-diagrams/56821/4 "2022-03-18T22:50:46Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.