Updated June 2026

Jupyter Widgets Programming

Class Duration

21 hours of live training delivered over 3 days.

Student Prerequisites

Python and JavaScript programming experience
Experience with the web browser DOM API is recommended
Backbone.js and jQuery experience is helpful only for the legacy ipywidgets internals module — the AnyWidget path requires neither; a 2-day web primer course is available for students new to front-end work

Target Audience

Python and JavaScript/TypeScript developers who want to extend JupyterLab and Notebook 7 with customized interactive widgets, from leveraging built-in widgets to building, documenting, and publishing their own.

Description

The Jupyter Widgets Programming course teaches Python and JavaScript/TypeScript developers how to extend JupyterLab and Notebook 7 with customized widgets. The course starts with the high-level concepts of creating and running custom widgets. Then, the course dives into low-level concepts and features that power widgets and how to employ those concepts and features to create new widgets. This class can be taught with JavaScript or TypeScript.

Learning Outcomes

How to extend JupyterLab and Notebook 7 with custom widgets
How to leverage Python and JavaScript/TypeScript to build custom widgets
Set up a custom widget development environment with AnyWidget (modern) or the ipywidgets Cookiecutter template (legacy)
How to utilize built-in widgets
How to layout and style widgets
How to implement asynchronous widgets
Understand the deeper inner workings of Jupyter Widgets
Documenting and publishing custom widgets

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Python and Visual Studio Code on their computers. Also, students will need permission to install Python packages and Visual Studio Code extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Extending JupyterLab

What is JupyterLab?
Python Programming
JavaScript Programming
Backbone.js (legacy widget front-end model)
Web Application Programming
Ways to Extend

Setup Development Environment

Manage NPM Packages with Yarn
Jupyter Notebook Development Release
Install with Pip or Conda
Running the Environment

Built-In Widgets

Numeric Widgets
Boolean Widgets
Selection Widgets
String Widgets
Container/Layout Widgets
Output Widgets
Other Widgets

Special Events
Traitlet Events
Linking Widgets
Continuous Updates
Debouncing
Throttling

Styling
Layout
User Interaction with Interact

Asynchronous Widgets

User Interaction – Event Loop Integration
User Interaction – Generators
Widget Background Updates

AnyWidget (the modern path)

AnyWidget vs. legacy ipywidgets cookiecutter — when to choose AnyWidget
ESM-based front-end code (no Backbone/jQuery/CoffeeScript)
Two-way state sync via traitlets and model.set / model.on
Hot-reload during development
Bundling with esbuild / Vite

Low-Level Understanding of Widgets

Communications between Python kernel and front-end
Synchronized state with traitlets
Models and views
Widget skeleton
Serialization of widget attributes
Installation, static assets, and distribution

Documentation
Widget Spec
Publish NPM Packages
Update Version Number