JupyterLab Extensions by Examples
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
create a new environment
conda env create
activate the environment
conda activate jupyterlab-extension-examples
go to the hello world example
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
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
2.xbranches are not updated anymore.
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:
Set up the development environment and print to the console.
Use Signals to allow Widgets communicate with each others.
Display a Datagrid as a Lumino Widget.
Register commands in the Command Palette.
Extend the main app with a Command.
Start your extension from the Launcher.
Add a Menu to the main app.
Create and use new Settings for your extension.
Use State persistence in an extension.
Create a React.js Widget in JupyterLab.
Add a new Widget element to the main window.
Send a log message to the log console.
Create a new log console.
Add a new button to an existent context menu.
Render kernel messages in an OuputArea.
Interact with a kernel from an extension.
Create a minimal extension with backend (i.e. server) and frontend parts.
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.
jlpm jlpm build-ext jlpm install-py jlpm install-ext jupyter lab
To rebuild all the extensions:
To clean the lib folders:
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:
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:
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 embedmefrom the root of the repository to regenerate the READMEs.
Once your extension is published on pypi.org (outside of this scope), you can install it with the following command:
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.
This examples repository is a Jupyter project and follows the Jupyter Community Guides and Code of Conduct.