Course Overview

The Jupyter Widgets course teaches Python and JavaScript/TypeScript developers how to extend Jupyter Labs/Notebooks with customized widgets. The course starts off 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 in the creation of new widgets.

This class can be taught with JavaScript or TypeScript.

Key Learning Areas

Attendees will acquire first-hand experience on how to extend the functionality of Jupyter Labs/Notebooks with customized widgets.

You will learn:

  • How to extend Jupyter Labs/Notebooks with custom widgets
  • How to leverage Python and JavaScript/TypeScript to build custom widgets
  • Setup a custom widgets development environment using a Cookie Cutter Template
  • 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

Course Outline

Extending Jupyter Labs

  • What are Jupyter Labs?
  • Python Programming
  • JavaScript Programming
  • Backbone.js
  • 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

Widget Events

  • Special Events
  • Traitlet Events
  • Linking Widgets
  • Continuous Updates
  • Debouncing
  • Throttling

Widget Presentation

  • Styling
  • Layout
  • User Interaction with Interact

Asynchronous Widgets

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

Low-Level Understanding of Widgets

  • Communications
  • Synchronized State
  • Models and Views
  • Code Execution
  • Model Execution
  • Display a View
  • Widget Skeleton
  • Serialization of Widget Attributes
  • Installation
  • Static Assets
  • Distribution

Publishing a Widget

  • Documentation
  • Widget Spec
  • Publish NPM Packages
  • Update Version Number

Who Benefits

Python and JavaScript/TypeScript developers who desire to extend the functionality of Jupyter Labs with custom widgets.

To work along with the labs, attendees must have the following:

  • A modern web browser like Microsoft Edge, Chrome, or Firefox. Internet Explorer is NOT supported.
  • Visual Studio Code with the Python Extension


Python and JavaScript programming experience. Web application programming experience is highly recommended.