Need help with extension-examples?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jupyterlab
166 Stars 63 Forks BSD 3-Clause "New" or "Revised" License 387 Commits 22 Opened issues

Description

JupyterLab Extensions by Examples

Services available

!
?

Need anything else?

Contributors list

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:

# clone the repository
git clone https://github.com/jupyterlab/extension-examples.git jupyterlab-extension-examples

go to the extension examples folder

cd jupyterlab-extension-examples

create a new environment

conda env create

activate the environment

conda activate jupyterlab-extension-examples

go to the hello world example

cd basics/hello-world

install the extension in editable mode

python -m pip install -e .

install your development version of the extension with JupyterLab

jupyter labextension develop . --overwrite

build the TypeScript source after making changes

jlpm run build

start JupyterLab

jupyter lab

The examples currently target JupyterLab 3.x.

If you would like to use the examples with JupyterLab 2.x, check out the 2.x branch.

If you would like to use the examples with JupyterLab 1.x, check out the 1.x branch.

Note that the

1.x
and
2.x
branches are not updated anymore.

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.

You are welcome to open any issue or pull request.

Basic

Hello World

Set up the development environment and print to the console.

Hello World

Signals

Use Signals to allow Widgets communicate with each others.

Button with Signal

Datagrid

Display a Datagrid as a Lumino Widget.

Datagrid

Command Palette

Command Palette

Register commands in the Command Palette.

Commmand Palette

Commands

Commands

Extend the main app with a Command.

Commmand example

Launcher

Launcher

Start your extension from the Launcher.

Launcher

Menus

Main Menu

Add a Menu to the main app.

Main Menu

Settings

Settings

Create and use new Settings for your extension.

Settings

State

State

Use State persistence in an extension.

State

React

React Widget

Create a React.js Widget in JupyterLab.

react-widget

Widget Tracker

Widgets

Add a new Widget element to the main window.

Custom Tab

Log Console

Log Messages

Send a log message to the log console.

Log Messages

Custom Log Console

Create a new log console.

Custom Log Console

Context Menu

Context Menu

Add a new button to an existent context menu.

Context Menu

Advanced

Kernel Output

Render kernel messages in an OuputArea.

OutputArea class

Kernel Messaging

Interact with a kernel from an extension.

Kernel Messages

Server Hello World

Create a minimal extension with backend (i.e. server) and frontend parts.

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. You can create a conda environment to get started after cloning this repository.

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

The previous command will use the environment.yaml file as requirements for the environment.

Develop and Use the Examples

Build and Install all Examples at once

jlpm
jlpm build-ext
jlpm install-py
jlpm install-ext
jupyter lab

To rebuild all the extensions:

jlpm build-ext

To clean the lib folders:

jlpm clean-ext

Build and Install one Example

Go to the example directory you want to install, e.g.

cd ./basics/hello-world
, and run the following commands:
pip install -e .
jupyter labextension develop . --overwrite

Rebuild the extension:

jlpm run build

You can now start JupyterLab and check if your extension is working fine:

jupyter lab

Change the Sources

If you want to develop and iterate on the code, you will need to open 2 terminals.

In terminal 1, go to the extension folder and run the following:

jlpm watch

Then in terminal 2, start JupyterLab with the watch flag:

jupyter lab --watch

From there, you can change your extension source code, it will be recompiled, and you can refresh your browser to see your changes.

We are using embedme to embed code snippets into the markdown READMEs. If you make changes to the source code, ensure you update the README and run

jlpm embedme
from the root of the repository to regenerate the READMEs.

Install a Published Extension

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

pip install 

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.

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!

Community Guidelines and Code of Conduct

This examples repository is a Jupyter project and follows the Jupyter Community Guides and Code of Conduct.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.