Creating a minimal custom Jupyter widget

June 23, 2022

I couldn't find a super minimal example of implementing a custom Jupyter widget, so here it is. This is based on Pierre Marion's Binder Repo for Hello World Jupyter Widget.

import ipywidgets as widgets
from traitlets import Unicode, validate

class HelloWidget(widgets.DOMWidget):
    _view_name = Unicode('HelloView').tag(sync=True)
    _view_module = Unicode('hello').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    value = Unicode('Hello World!').tag(sync=True)

define('hello', ["@jupyter-widgets/base"], function(widgets) {

    var HelloView = widgets.DOMWidgetView.extend({

        render: function() { 
            this.el.textContent = this.model.get('value'); 

    return {
        HelloView : HelloView

Further reading

Here are some great articles that I referenced while exploring this topic: