13

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?

Ely
  • 408
  • 4
  • 12
  • so did you ever figure this out? – James Draper May 08 '17 at 20:06
  • No, it is still an open issue! I've also tried binder: http://mybinder.org/. The widgets are not displaying either in binder (although that's a different issue). But if possible, I would prefer to embed the widgets in the html... – Ely May 10 '17 at 07:53
  • What a shame. It kinda defeats the whole purpose of having widgets if they don't work in a static implementation where the end users could "interact" with them. – James Draper May 15 '17 at 17:00
  • Did you read the latest docs for ipywidgets 7? This might help you figure it out. https://ipywidgets.readthedocs.io/en/latest/embedding.html – Vidar Sep 14 '17 at 12:47
  • @vidar thanks, it does look helpful! I had to stop working on this project for a while, but I'll try when I get the time :) – Ely Aug 29 '18 at 17:24

2 Answers2

5

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)

hdm
  • 99
  • 1
  • 8
0

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.

Ezequiel Castaño
  • 123
  • 2
  • 9