# Render react in custom (ipywidgets) widget

**URL:** <https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281>\
**Category:** JupyterLab\
**Tags:** help-wanted\
**Created:** [November 20, 2024, 8:14pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281 "2024-11-20T20:14:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevdav](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kevdav](https://discourse.jupyter.org/u/kevdav)\
**Post date:** [November 20, 2024, 8:14pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281/1 "2024-11-20T20:14:34Z")

</div>

I would like to render a React component to a DOMWidgetView, or to phrase it more general, render a React component to a custom widget based on ipywidgets.

The documentation [Building a Custom Widget - Email widget — Jupyter Widgets 8.1.5 documentation](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html) shows how to render the frontend side of a custom widget:

```auto
export class EmailView extends DOMWidgetView {
  render() {
    this.el.classList.add('custom-widget');

    this.value_changed();
    this.model.on('change:value', this.value_changed, this);
  }

  value_changed() {
    this.el.textContent = this.model.get('value');
  }
}

```

Then we have the react-widget example at [extension-examples/react-widget at main · jupyterlab/extension-examples · GitHub](https://github.com/jupyterlab/extension-examples/tree/main/react-widget)  
In src/widget.tsx it defines a ReactWidget:

```auto
export class CounterWidget extends ReactWidget {
    /**
     * Constructs a new CounterWidget.
     */
    constructor() {
      super();
      this.addClass('jp-react-widget');
    }
  
    render(): JSX.Element {
      return <CounterComponent />;
    }
  }

```

How can I combine the two? Say, I want to render the CounterComponent into the EmailView. Is this possible?  
ReactWidget is derived from lumino Widget. DOMWidgetView is derived from jupyter-widgets WidgetView. There is no common ancestor in their class hierarchies.

I wonder if somebody has solved this before.

Thank you  
Kevin

---

<div class="post-metadata">

**Author:** ![gereleth](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/gereleth/32/4656_2.png) [@gereleth](https://discourse.jupyter.org/u/gereleth)\
**Post date:** [November 21, 2024, 6:41pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281/2 "2024-11-21T18:41:47Z")

</div>

If you want to create a widget with React I would recommend checking out [`anywidget`](https://github.com/manzt/anywidget) – it’s a library that greatly simplifies the development of custom widgets.

They have a CLI to bootstrap a new widget project:

```auto
npm create anywidget@latest

```

There’s a “React” option there that will set up a React-based widget so you can quickly try things out.

---

<div class="post-metadata">

**Author:** ![kevdav](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kevdav](https://discourse.jupyter.org/u/kevdav)\
**Post date:** [November 22, 2024, 4:03pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281/3 "2024-11-22T16:03:10Z")

</div>

Thank you very much! anywidget looks like an option if I cannot solve this using ipywidgets alone.

When I heard about anywidget a few months ago for the first time, I couldn’t take it serious, because the getting-started examples gave the impression that the frontend js code had to be defined in a multiline python string. After I closer look I understand that it can also import a js file, and also bundling tsx code seems to be possible. Very nice.

Still, I’d prefer a solution without anywidget. Is it possible?

---

<div class="post-metadata">

**Author:** ![kevdav](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kevdav](https://discourse.jupyter.org/u/kevdav)\
**Post date:** [November 22, 2024, 5:56pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281/4 "2024-11-22T17:56:20Z")

</div>

Unfortunately, I have to customize the widget serialization of my models as explained here:

[https://ipywidgets.readthedocs.io/en/7.x/examples/Widget%20Low%20Level.html#Custom-serialization-and-de-serialization-on-the-JavaScript-side](https://ipywidgets.readthedocs.io/en/7.x/examples/Widget%20Low%20Level.html#Custom-serialization-and-de-serialization-on-the-JavaScript-side)

My DOMWidget (or AnyWidget, if possible) has some members like  
`childx = traitlets.Instance(X).tag(sync=True)`  
where X is another Widget. If I cannot (de)serialize these members as described in the link, such nested members cannot be used. This seems to be a limitation of anywidget.

---

<div class="post-metadata">

**Author:** ![gereleth](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/gereleth/32/4656_2.png) [@gereleth](https://discourse.jupyter.org/u/gereleth)\
**Post date:** [November 22, 2024, 8:07pm UTC](https://discourse.jupyter.org/t/render-react-in-custom-ipywidgets-widget/30281/5 "2024-11-22T20:07:41Z")

</div>

Container widgets and serialization are kind of over my head to be honest. There are some possibly relevant topics in anywidget discussions:

- [How to implement a container widget? #293](https://github.com/manzt/anywidget/discussions/293)
- [Is it possible to create a box container widget with this? #580](https://github.com/manzt/anywidget/discussions/580)

I’m afraid I can’t contribute more on this topic =).