Working across Panel and ipywidgets ecosystems

Updated: Mar 22

This notebook is designed to help you learn how to make apps in panel in about 15 minutes. Screenshots of cell outputs are included for convenience below, but it is strongly recommended that you use the interactive version by clicking here (takes 1-2 minutes to load) or by cloning the repo and running locally.


Panel is a open-source Python library that makes it easy to build interactive web apps and dashboards with flexible user-defined widgets. The Panel library makes a broad range of widgets available. However, did you know that you can also use widgets from ipywidgets library with Panel seamlessly?



What are widgets?


For our purposes, a widget is a component of a graphical user interface (GUI) that enables easy interaction with the application (e.g., a drop-down menu for selecting from a set of items or a slider for specifying a numeric value). Until recently, GUI authors had to choose between strictly using Panel or strictly using ipywidgets because each ecosystem had distinct widget patterns; fortunately, that is no longer the case. The union of these ecosystems opens up enormous possibilities for designing flexible GUIs (both in notebooks and in web applications).


Panel and ipywidgets demonstration.


We'll show you an example in this notebook that uses widgets from ipywidgets within a Panel app. We are going to modify an example Panel app for exploring the autompg dataset (from the Panel website) by switching out the Panel.ColorPicker widget with the ipywidgets.ColorPicker widget. Just for fun, we'll also add in widgets from ipywidgets to change the size and shape of the markers in a scatter plot.


import hvplot.pandas, panel, ipywidgets
from bokeh<