# Litegraph.js Integration

**URL:** <https://community.plotly.com/t/litegraph-js-integration/69244>\
**Category:** Dash Python\
**Tags:** community-components\
**Created:** [October 26, 2022, 3:15pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244 "2022-10-26T15:15:12Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![popo](https://avatars.discourse-cdn.com/v4/letter/p/5f9b8f/32.png) [@popo](https://community.plotly.com/u/popo)\
**Post date:** [October 26, 2022, 3:15pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/1 "2022-10-26T15:15:12Z")

</div>

Hi everyone,

Any chance to see [Litegraph.js](https://github.com/jagenjo/litegraph.js) implemented through plotly?  
I do not have the knowledge to implement this myself, but I think it would be a great addition to the community plotly components.

Btw  
Big up to idling-mind for the [flowfunc](https://github.com/idling-mind/flowfunc) implementation of Flume.js  
Implementing custom nodes is spot-on straightforward (via pydantic I guess?). Simply genius!  
The only problem is that Flume itself might lack some basic functionality readily available in Litegraph.js (subgraphs, multi outputs, dynamic pins creation, …) to really go in depth.

There are examples of [Litegraph/Python implementations in Holoviz Pane](https://discourse.holoviz.org/t/litegraph-js-integration/4091)l, but nothing concrete.

---

<div class="post-metadata">

**Author:** ![popo](https://avatars.discourse-cdn.com/v4/letter/p/5f9b8f/32.png) [@popo](https://community.plotly.com/u/popo)\
**Post date:** [October 26, 2022, 9:49pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/2 "2022-10-26T21:49:06Z")

</div>

Some eye candy might help to trigger some attention…

[Litegraph.js online demo](https://tamats.com/projects/litegraph/editor/)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/d/4d8e56ace29627ae7cc1ae0bc1598e07e5380fe1.png)

---

<div class="post-metadata">

**Author:** ![davegibbon\_yvr](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/davegibbon_yvr/32/10449_2.png) [@davegibbon\_yvr](https://community.plotly.com/u/davegibbon_yvr)\
**Post date:** [October 26, 2022, 11:15pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/3 "2022-10-26T23:15:40Z")

</div>

eye candy is always good

I have even less knowledge to Dash ify litegraph.js myself

but maybe educate me … what exactly (in laypeople speak) do people use these either of these two things for anyway?

---

<div class="post-metadata">

**Author:** ![popo](https://avatars.discourse-cdn.com/v4/letter/p/5f9b8f/32.png) [@popo](https://community.plotly.com/u/popo)\
**Post date:** [October 27, 2022, 8:09pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/4 "2022-10-27T20:09:37Z")

</div>

In short, it allows you to do some visual programming and execute the network during runtime.  
Sounds dull…

Ask my 8 yo daughter, she has been quite busy lately playing with her Lego Boost Robot.  
She literally Visually Programmed a 10min play called ‘Robo meets Barbie and friends’ on her pink tablet with pony stickers…

Visual building blocks (nodal networks) can bring data analysis to the masses. (or at least those interested)  
Coding analphabets can start fiddling with simple building blocks to connecting them into small networks to analyze data.  
They could use their own build nodes and/or use ready-built higher level blocks to do their own data studies and visualize them in plotly’s lovely dashboards.  
(Litegraph nodes can be nested in true OOP fashion).  
All this without writing a single line of code. Those nodal networks can easily be saved and shared.

The nodal-network visual approach can also assist more advanced programmers to do …

Any how, davegibbon, plenty 'o cool advantages to Visual Programming

---

<div class="post-metadata">

**Author:** ![idling-mind](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/idling-mind/32/33248_2.png) [@idling-mind](https://community.plotly.com/u/idling-mind)\
**Post date:** [January 31, 2023, 11:32am UTC](https://community.plotly.com/t/litegraph-js-integration/69244/5 "2023-01-31T11:32:10Z")

</div>

Hi @popo !  
Thanks for your mention about [flowfunc](https://github.com/idling-mind/flowfunc). You are right about features in flume. I could not get many of my ideas implemented as flume was lacking them. I had explored litegraph.js even before i decided to go with flume. The main reason was my limited javascript knowledge and the sparse documentation. I should give kudos to chrisjpatty for his awesome [documentation of flume](https://flume.dev) because that’s the main reason i kind of went with flume. Also, the react integration was easy for me to understand.

I am waiting for flume’s planned re-write in typescript and am hoping for some of the missing features to be implemented. But if someone can start a dash component using litegraph, I’d defenitely be interested to port the python backend from flume.

---

<div class="post-metadata">

**Author:** ![popo](https://avatars.discourse-cdn.com/v4/letter/p/5f9b8f/32.png) [@popo](https://community.plotly.com/u/popo)\
**Post date:** [February 1, 2023, 3:18pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/6 "2023-02-01T15:18:49Z")

</div>

Hi idling-mind  
Big up 🤘 again for the wonderful work on Flume!

You mentioned that a Flume re-write is in the make.  
Where can I find some info on this?

---

<div class="post-metadata">

**Author:** ![idling-mind](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/idling-mind/32/33248_2.png) [@idling-mind](https://community.plotly.com/u/idling-mind)\
**Post date:** [February 1, 2023, 10:25pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/7 "2023-02-01T22:25:01Z")

</div>

I saw comments from Flume’s author in few discussions. [Here](https://github.com/chrisjpatty/flume/issues/208#issuecomment-1407474845) is one.

---

<div class="post-metadata">

**Author:** ![popo](https://avatars.discourse-cdn.com/v4/letter/p/5f9b8f/32.png) [@popo](https://community.plotly.com/u/popo)\
**Post date:** [August 9, 2023, 1:00pm UTC](https://community.plotly.com/t/litegraph-js-integration/69244/8 "2023-08-09T13:00:32Z")

</div>

If anyone is still wondering why litegraph would be a great addition to Dash

Nodal workflows is how one makes ‘Bleeding Edge AI’ accessible to ‘normal people’.

Killer Litegraph.js integration for stable diffusion : [ComfyUI](https://github.com/comfyanonymous/ComfyUI)

Somebody pleeees bring it to Dash…

---

<div class="post-metadata">

**Author:** ![ploncker](https://avatars.discourse-cdn.com/v4/letter/p/d26b3c/32.png) [@ploncker](https://community.plotly.com/u/ploncker)\
**Post date:** [January 28, 2025, 5:23am UTC](https://community.plotly.com/t/litegraph-js-integration/69244/9 "2025-01-28T05:23:45Z")

</div>

Litegraph is now a dash component.

The repo is here:

> <https://github.com/ploncker/dash_diagram/blob/main/README.md>

pip install dash-diagram
