How to get ipywidgets interact to work in HTML?

Question

I have a Jupyter notebook with the following cell:

from ipywidgets import widgets, interact
slider = widgets.IntSlider()
def print_val(v):
  print(v)
interact(print_val,v=slider)

This works fine in the notebook - when I change the slider the printed output changes. But when I use nbconvert to convert the notebook into HTML, the slider still renders fine in the output HTML, but has no effect on the printed output.
Any idea how to get this to work? Maybe ipywidgets is not the right library for this kind of stuff?
Thanks!

Answer 1

I think you miss what nbconvert does. This utility is needed for converting notebooks to other formats, such as PDF, LATEX, etc. It is used for sharing and presentation. One loses the interactivity option once the notebook is converted.

The interactivity of the Jupyter notebook is provided by the Jupyter server that is started when you invoke jupyter notebook from command line.

So when you save notebook as a web page or convert it to HTML, you don't have the server back end part that processes all the changes. It is a static web page. Because the slider is a standard element it is rendered correctly, but nothing happens when you slide it: there is nothing "attached" to it to handle the events.

At the end, in order to be able to interact with Jupyter notebook, you need the some kind of Jupyter server to be running. It can be a local server if you need it only for yourself, or you can use Google Colab (or Jupyter Hub) if you want to collaborate with others.

Also, there are several solutions that allow one to have some interactivity on the graphs, like Bokeh and Plotly. They also require you to run some kind of server.

Of course, all that is relevant only if you need Python to process your data. If your needs are simple as showing the slider value you better off with a simple Javascript, that can handle the slider changes right in the browser, without the need to run any server at the back end.