# LiteGraph JS integration

**URL:** <https://discourse.holoviz.org/t/litegraph-js-integration/4091>\
**Category:** Panel\
**Created:** [August 11, 2022, 10:43am UTC](https://discourse.holoviz.org/t/litegraph-js-integration/4091 "2022-08-11T10:43:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ljilekor1](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/l/e47c2d/32.png) [@ljilekor1](https://discourse.holoviz.org/u/ljilekor1)\
**Post date:** [August 11, 2022, 10:43am UTC](https://discourse.holoviz.org/t/litegraph-js-integration/4091/1 "2022-08-11T10:43:07Z")

</div>

He everyone,

Is there any chance that Panel would implement [LiteGraphJS](https://github.com/jagenjo/litegraph.js) anytime soon?  
Looks mighty powerful and very useful

There are already a few standalone implementations in python [example](https://github.com/zebulon75018/flasklitegraphjs)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [August 12, 2022, 12:19pm UTC](https://discourse.holoviz.org/t/litegraph-js-integration/4091/2 "2022-08-12T12:19:00Z")

</div>

Hi @ljilekor1

You could try to make a Feature Request describing your use case [link](https://github.com/holoviz/panel/issues).

Try to describe your use case, how you would like to use it and why it would be important for Panel to support.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [August 13, 2022, 7:21am UTC](https://discourse.holoviz.org/t/litegraph-js-integration/4091/3 "2022-08-13T07:21:17Z")

</div>

For now one way to integrate litegraph.js would be to use [`ReactiveHTML`](https://panel.holoviz.org/user_guide/Custom_Components.html#reactivehtml-components).

Here is a basic example

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/7/78c10aeacaa5d8439fdd5f1c783c5752948baad6.png)

```python
import panel as pn
import param

pn.extension(sizing_mode="stretch_width", template="fast")

class LiteGraph(pn.reactive.ReactiveHTML):
    value = param.Dict()

    save = param.Event()

    _template = """
    <div id="container" style="height:100%;width:100%">
    <canvas id='litegraph' style='border: 1px solid'></canvas>
    </div>
    """

    _scripts = {
        "render": """
self.resize_canvas()

var graph = new LGraph();
var canvas = new LGraphCanvas(litegraph, graph, {autoresize: true});
graph.start()

state.graph=graph
self.load()
""",
        "resize_canvas": """
        litegraph.setAttribute("height", model.height);
        litegraph.setAttribute("width", model.width);
    """,
        "save": """
var graph=state.graph;

var value=state.graph.serialize();
console.log(value)
data.value=value;
""",
        "load": "state.graph.configure(data.value);",
        "value": "self.load()",
    }

    __javascript__ = [
        "https://cdn.jsdelivr.net/gh/jagenjo/litegraph.js@master/build/litegraph.min.js"
    ]

    __css__ = ["https://cdn.jsdelivr.net/gh/jagenjo/litegraph.js@master/css/litegraph.css"]

value = {
    "last_node_id": 2,
    "last_link_id": 1,
    "nodes": [
        {
            "id": 1,
            "type": "basic/const",
            "pos": [200, 200],
            "size": [180, 30],
            "flags": {},
            "order": 0,
            "mode": 0,
            "outputs": [{"name": "value", "type": "number", "links": [1], "label": "4.500"}],
            "properties": {"value": 4.5},
        },
        {
            "id": 2,
            "type": "basic/watch",
            "pos": [700, 200],
            "size": [140, 26],
            "flags": {},
            "order": 1,
            "mode": 0,
            "inputs": [{"name": "value", "type": 0, "link": 1, "label": ""}],
            "properties": {},
        },
    ],
    "links": [[1, 1, 0, 2, 0, "number"]],
    "groups": [],
    "config": {},
    "extra": {},
    "version": 0.4,
}

# Can only support fixed sizing_mode for now
graph = LiteGraph(value=value, width=1024, height=720, sizing_mode="fixed").servable()
button = pn.widgets.Button.from_param(graph.param.save).servable()
json = pn.widgets.JSONEditor.from_param(graph.param.value).servable()

@pn.depends(graph.param.value, watch=True)
def _print(value):
    print(value)

```

Some issues currently

- I cannot support responsiveness like `sizing_mode="stretch_width"`
- `save` does not work. I see an error in the browser console when clicking save

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/e/e80d467b6f056cabd7a47bbecf9d9e618a3851d7.png)

- events. I haven’t figured out how to configure events from litegraph.js.

One comment is that the documentation and examples of `litegraph.js` is quite sparse. There might be other libraries out there that are easier to implement.

---

<div class="post-metadata">

**Author:** ![ljilekor1](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/l/e47c2d/32.png) [@ljilekor1](https://discourse.holoviz.org/u/ljilekor1)\
**Post date:** [August 13, 2022, 9:37am UTC](https://discourse.holoviz.org/t/litegraph-js-integration/4091/4 "2022-08-13T09:37:45Z")

</div>

Holy Smokes!! It is possible!

Big thanks Marc for showing us the nitty gritty on how to do this