# Hosting interactive jupyter HTML file (with ipywidgets) on github as web page?

**URL:** <https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361>\
**Category:** JupyterHub\
**Created:** [March 16, 2021, 9:36pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361 "2021-03-16T21:36:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MikeLemon](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mikelemon/32/3950_2.png) [@MikeLemon](https://discourse.jupyter.org/u/MikeLemon)\
**Post date:** [March 16, 2021, 9:36pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/1 "2021-03-16T21:36:39Z")

</div>

Hello,

Do I was wondering if it is possible to host an interactive application that includes ipywidgets in the exported HTML document as a webserver and what additional elements do you need to make it happen?

Basic markdown, matplotlib and HTML seem to work fine but the ipywidgets don’t seem to show up @ deployments…

Any idea what needs to be done to make it work?

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [March 16, 2021, 9:51pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/2 "2021-03-16T21:51:51Z")

</div>

ipywidgets aren’t going to work as they need the active kernel.

> “Jupyter interactive widgets are interactive elements, think sliders, text boxes, buttons, that have representations both in the kernel (place where code is executed) and the front-end (the Notebook web interface). To do this, a clean, well-abstracted communication layer must exist.” - [Source](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Low%20Level.html#How?)

You can though actually host the notebooks on Github and launch them via MyBinder without deploying a server yourself, even without the notebook showing if you use the Voila dashboard as a display choice. You can see several examples of this [here at the Voila Gallery](https://voila-gallery.org/). Click on any many part of the tiles representing any of the examples and they will launch via MyBInder for free. The repositories you can get by clicking ‘Source’ below each tile at the Gallery show what is necessary to archive those notebooks on Github and have them be launchable. There is no need to export the HTML to do this.

Alternatively, check out [the nbinteract package](https://www.nbinteract.com/).

> " `nbinteract` is a Python package that provides a command-line tool to generate interactive web pages from Jupyter notebooks. It allows [Jupyter widgets](https://github.com/jupyter-widgets/ipywidgets/) to remain interactive even when the notebook is converted to static HTML by using [Binder servers](http://mybinder.org/) as the computational backend."

Given your description, nbinteract indeed may be what you seek; however, I don’t have experience with it and so I naturally lean towards Voila.  
Plus:

> " Currently, `nbinteract` is in an alpha stage because of its quickly-changing API." - [Source](https://github.com/SamLau95/nbinteract#nbinteract).

* * *

* * *

[Panel](https://panel.holoviz.org/) is related to the dashboarding option I first discussed. Different developers. It also has the similar issues regarding the widgets needing Python backing though, as you can gather from this text:

> “If your development environment offers embedded Python processes but does not support ipywidgets or Jupyter “comms” (communication channels), you will notice that some or all interactive functionality is missing. Some widgets that operate only in JavaScript will work fine, but others require communication channels between JavaScript and Python. In such cases you can either request ipywidgets or Panel support from the editor or environment, or else use the Editor + Server approach above.” - [Source](https://panel.holoviz.org/#other-environments)

---

<div class="post-metadata">

**Author:** ![psychemedia](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/psychemedia/32/24_2.png) [@psychemedia](https://discourse.jupyter.org/u/psychemedia)\
**Post date:** [March 16, 2021, 11:43pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/3 "2021-03-16T23:43:57Z")

</div>

There’s also [`containds` dashboards](https://github.com/ideonate/cdsdashboards) which offers a single point of entry to several different dashboarding solutions.

---

<div class="post-metadata">

**Author:** ![psychemedia](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/psychemedia/32/24_2.png) [@psychemedia](https://discourse.jupyter.org/u/psychemedia)\
**Post date:** [March 16, 2021, 11:49pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/4 "2021-03-16T23:49:16Z")

</div>

In the R universe, there appears to be a mechanism for linking R generated `htmlwidgets` (which I think work in Jupyter classic notebook UI at least) using the [`crosstalk`](http://rstudio.github.io/crosstalk/) package. This appears to allow one widget to interact with another, but presumably requires each widget to contain all the state it needs to allow it it react to changes made to linked widgets.

---

<div class="post-metadata">

**Author:** ![MikeLemon](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mikelemon/32/3950_2.png) [@MikeLemon](https://discourse.jupyter.org/u/MikeLemon)\
**Post date:** [March 17, 2021, 9:01am UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/5 "2021-03-17T09:01:20Z")

</div>

Well first of all thanks for the extended answer in the topic well appreciated.

nbinteract seem like the right direction sins I realy don’t like all the other freemium methods that are either unsably slow and unreliable or slowly pushes you to buy a product / service.

And are you saying that nbinteract doesn’t support python to javascript variable interaction and convertion?  
after all if you can’t link a slider to an actual function or operation written in python and just displays the widget it’s quite useless correct me if I’m wrong.

How comes such a smooth transition from jupyter to web HTML doesn’t exist?  
like that jupyter is similar to R both having the same friction complications…

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [March 18, 2021, 8:22pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/6 "2021-03-18T20:22:46Z")

</div>

More to go along with this discussion:

- See [this thread](https://discourse.jupyter.org/t/embedding-ipywidgets-outside-ipython-notebook/8408). In particular note [Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.0.0a4 documentation](https://ipywidgets.readthedocs.io/en/latest/embedding.html#embedding-jupyter-widgets-in-other-contexts-than-the-notebook) .

- See [Feature Idea: A specification for notebook output dependencies](https://discourse.jupyter.org/t/feature-idea-a-specification-for-notebook-output-dependencies/8428) .

---

<div class="post-metadata">

**Author:** ![MikeLemon](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mikelemon/32/3950_2.png) [@MikeLemon](https://discourse.jupyter.org/u/MikeLemon)\
**Post date:** [March 21, 2021, 7:08pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/7 "2021-03-21T19:08:26Z")

</div>

Just wondering

How does Jupyter inject the python output content of lets say

```
widgets.FloatText()

```

to HTML from first principles?

What does that function actually output and how is it interpreted by what until in lands in the vanila HTML? Does displaying that widget require any javascript library or modules?

Also what does

```
display()

```

Do? what exactly is the “WIDGET MODEL” and “WIDGET VIEW” ?

---

<div class="post-metadata">

**Author:** ![MikeLemon](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mikelemon/32/3950_2.png) [@MikeLemon](https://discourse.jupyter.org/u/MikeLemon)\
**Post date:** [March 21, 2021, 9:04pm UTC](https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/8 "2021-03-21T21:04:06Z")

</div>

> [@fomightez](#):
>
> In particular note [Embedding Jupyter Widgets in Other Contexts than the](https://ipywidgets.readthedocs.io/en/latest/embedding.html#embedding-jupyter-widgets-in-other-contexts-than-the-notebook)

Yeah so according to [this](https://ipywidgets.readthedocs.io/en/latest/embedding.html#python-interface)

which is better illustrated with VS code intelesense:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/1/1a776203ea816ed35e3d7e0110a9ca6b8ac6df1d.png)

what is that manager state attribute mean anyway?

The code in [“this”](https://ipywidgets.readthedocs.io/en/latest/embedding.html#python-interface) basically concatinates and embeds the widgets into an HTML template and exports this to a functional export.HTML file which defeats the whole purpose of Jupyter notebooks but that’s a getting started point.

And say I wanted to link and add an interactive matplotly graph to a slider how’d you do that?

and how’d you achive this function of Jupyter notebooks?:

```
a = widgets.FloatText()
b = widgets.FloatSlider()

display(a,b)

mylink = widgets.jslink((a, 'value'), (b, 'value'))

```

I guess such example could explain the whole independent HTML hosting and considered a solution.
