Jupyter Ipywidgets & Static Pages

Cross-posting this here, from my question on Gitter]

Hello friends, I am trying to generate a static page with interactive elements from a Jupyter Notebook. I am able to use nbconvert to export an HTML version of a Jupyter Notebook and the altair charts remain completely interactive!

However, I’m having trouble doing the same thing with Ipywidgets. I am able to get the widgets to render on a static page, but not I’m not able to get that widget to actually change other elements in the page (like a chart etc). See this example: https://machine-learning-apps.github.io/fast_template/2020/02/02/test-nbdev.html#Ipywidgets

I’ve read through these docs https://ipywidgets.readthedocs.io/en/latest/embedding.html#embedding-jupyter-widgets-in-other-contexts-than-the-notebook and tried several of those things and none of those things work for me ( I am able to render the widget, its just not truly interactive). I have also seen Jake Vanderplas’s demo of a notebook using a no longer supported extension called StaticInteract. (Discourse limits me to only 2 links for my first post so forgive me for not putting the link here)

This leads me to believe there is a way that this is possible, especially since I see on Jake’s page that this is supported by the Jupyter project now, however maybe I’m missing something.

Does anyone have a minimal hello world example they can share of exporting a jupyter notebook with ipywidgets that change a chart to a static site where all the interactivity is preserved? (I am trying to use GitHub pages, BTW).

Thank you so much for your help!

3 Likes

Hey there; I don’t have your answer, but it seems like you could answer mine :slight_smile:

so I have Python code that produces ipywidgets; nothing fancy, just text in a grid; I was thinking this would be preserved when downloading the notebook in html format (my understanding is this goes through nbconvert somehow); however the widget just vanishes

You are saying

I am able to get the widgets to render on a static page

so apparently you can do what I am trying to do; what am I doing wrong here ?

Thanks in advance !


I’m attaching screenshots below

in the notebook

image

in the downloaded html

image