Jupyter widgets in Hugo

Loading the widgets

We first need to load the widget state with our widget_state shortcode

{{< widget-state state="/content/widgets/widget_state.json" >}}

Displaying the widgets

Now we can display the widgets that were originally in a Jupyter notebook with our widget shortcode:

{{< widget model_id="6593b7fef9874465b5f323790e13d6ba" >}}

{{< widget model_id="6593b7fef9874465b5f323790e13d6ba" >}}
{{< widget model_id="ab00a002a80a420c85b6a9a72e569e2d" >}}

Above we're seeing an integer slider, and then, the same integer slider repeated, together with a float slider. The two sliders were linked in the notebook, and the link remains active here.