Creating a minimal custom Jupyter widget

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)

%%javascript
require.undef('hello');

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

    var HelloView = widgets.DOMWidgetView.extend({

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

    return {
        HelloView : HelloView
    };
});

HelloWidget()

Further reading

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

• Binder Repo for Hello World Jupyter Widget
• Authoring Custom Jupyter Widgets: A Hands-On Guide
• ipywidgets Official Documentation: Building a Custom Widget - Email widget
• Binder Repo for Hello World Jupyter Widget
• IPython Notebook: Javascript/Python Bi-directional Communication. I think this may have been the birth of ipywidgets!