Skip to content

jupyterlab/extension-examples

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JupyterLab Extensions by Examples

Github Actions Status Binder

TL;DR

The goal of this repository is to show how to develop extensions for JupyterLab, presented as short tutorial series.

To get started:

git clone https://github.com/jtpio/jupyterlab-extension-examples.git &&
  cd jupyterlab-extension-examples && \
  conda env create && \
  conda activate jupyterlab-extension-examples && \
  cd basics/hello-world && \
  jlpm && \
  jlpm run build && \
  jupyter labextension link .

# In another terminal
jupyter lab --watch

Develop by Examples

You may find it easier to learn how to create extensions by examples, instead of going through the documentation.

Start with the Hello World and then jump to the topic you are interested in.

You can expect from each example:

  • An explanation of its functionality.
  • An image or screencast showing its usage.
  • The list of used JupyterLab API and Extension Points.
  • Explanations of the internal working, illustrated with code snippets.

We have structured the examples based on the extension points. Browse the previews below or skip them and jump directly to the sections for developers.

Basic

Hello World

Button with Signal

Datagrid |

Command Palette

Commmand Palette

Commands

Commmand example

Launcher

Launcher

Menus

Main Menu

Settings

Settings

State

State

React

react-widget

Widget Tracker

Custom Tab

Advanced

OutputArea class

Kernel Messages

Server Hello World

Prerequisites

Writing an extension requires basic knowledge of JavaScript, Typescript and potentially Python.

Don't be scared of Typescript, even if you never coded in TypeScript before you touch JupyterLab you may find it easier to understand than pure JavaScript if you have a basic understanding of object oriented programming and types.

These examples are developed and tested on top of JupyterLab version 1.2. You can create a conda environment to get started.

conda env create && \
  conda activate jupyterlab-extension-examples

Develop and Use the Examples

Build and link all examples at once

jlpm
jlpm build-ext
jlpm link-ext
jlpm build-jlab
jupyter lab

To clean the lib folders:

jlpm clean-ext

Build and link one example

Go to the example directory you want to install, e.g. cd ./basics/hello-world, and run the following commands:

jlpm install
jlpm run build
jupyter labextension link .

Rebuild the JupyterLab application:

jlpm run build
jupyter lab build

Start JupyterLab in watch mode:

jupyter lab --watch

Install a Published Extension

Once your extension is published (outside of this scope), you can install it with the following command:

jupyter labextension install <published_extension>

About JupyterLab

JupyterLab can be used as a platform to combine existing data-science components into a new powerful application that can be deployed remotely to many users. Some of the higher level components that can be used are text editors, terminals, notebooks, interactive widgets, filebrowser, renderers for different file formats that provide access to an enormous ecosystem of libraries from different languages.

JupyterLab Documentation

Complementary to these examples, you can rely on the official JupyterLab documentation.

Credits

We would like to thank MMesch for initiating this work, as well as everyone else who contributed!