Jupyter: embed live interactive widgets

Question

According to the Jupyter blog here, it is now possible to embed interactive widgets in a static webpage:

Live interactive widgets can now be embedded into static web pages or blogs by inserting an html snippet containing the serialized widget state. This also works with custom widget libraries. See http://jupyter.org/embed-jupyter-widgets.html.

When I open the example above, in firefox or chrome, I get the interactive widgets alright!

However, if I create a new notebook with the same bit of python code, save the notebook as html, and then copy-paste the embeddable HTML snippet to render the interactive widgets, it is not working. At best I obtain an image of the widget state, but nothing interactive.

Has anyone managed to replicate the HTML page with interactive widgets? Is there something that I am missing?

Answer 1

We made Kyso for exactly this. You can embed a jupyter notebook into a website using kyso.io, and as long as the widgets are supported by BokehJS dashboard, the notebook will be interactive. Here is an example

PS. (disclaimer - I’m a founder of kyso)

Answer 2

It's been a long time since the question was asked but I will answer with today technology.

In order to embed interactive widgets you need a backend but there is a Project called MyBinder that can be used as a backend in the cloud for free. This was used as the foundation of a library called NBinteract, which can convert any notebook with interactive widgets in a single HTML webpage.

These HTMLs load a script from a cdn and manage all the interaction with MyBinder by their own.

There are some examples in their website and I also published a post in my blog where I used this technology along with Dockerfile, ffmpeg, matplotlib, animations and interactive widgets. So I believe this approach is quite robust and flexible.

The official docs says you need a repo but I could manage to use gists instead and submited an issue in the main repo explaining how to do it.