Create a new frontend extension

Introduction

There are two types of extensions in JupyterLite:

• frontend extensions

• server extensions

Frontend extensions are JupyterLab extensions, and are meant to extend the interfaces and functionalities of the JupyterLab and Notebook UIs.

Example of such extensions are:

• jupyterlab-tour: walk users through the JupyterLab interface

• jupyterlab-night: custom dark theme for JupyterLab

In this guide, we cover frontend extensions. If you would like to create a server extension, check out Server Extension Guide.

Creating the extension

Since JupyterLite reuses the same extension system as in JupyterLab, you can develop the extension the same way as you would develop a normal JupyterLab extension.

Create a new environment

A best practice is to create a new environment for working on the extension. You can use mamba for this:

mamba create -n my-jupyterlite-extension -c conda-forge python nodejs
mamba activate my-jupyterlite-extension

Follow the Extension Tutorial

Follow the Extension Tutorial to get started.

After the tutorial, you should have a new local folder with the extension activate in JupyterLab.

Load the extension in JupyterLite

By default JupyterLite is able to find JupyterLab extensions installed in the same environment under PREFIX/share/labextensions.

The jupyterlite-core CLI does this automatically by default. In your local environment:

1. Install the jupyter lite CLI with: pip install jupyterlite-core

2. Build the website: jupyter lite build. In the build logs you should see something like the following that indicates the extension was correctly found and copied:

...
federated_extensions:copy:ext:jupyterlab_apod
.  pre_build:federated_extensions:copy:ext:jupyterlab_apod
...

3. Serve the website: jupyter lite serve

Then open your browser at http://localhost:8000 and you should be able to see the Astronomy Picture of the Day (APOD) extension loaded:

If you iterate and make new changes to the extension:

• Rebuild the extension with jlpm run build

• Re-run jupyter lite build

• Refresh the page

Note

By default the jupyterlite-core package does not include any kernels. If you would like to have a Python kernel available in your test JupyterLite deployment, you can install the jupyterlite-pyodide-kernel package with pip, or add it to your list of dependencies.

Publishing the extension

Once you have your extension running you might want to publish to PyPI so it can be installed by other folks.

By default the extension created from the template is compatible with the Jupyter Releaser.

The Jupyter Releaser simplifies the release process and ensure best practices.

You can learn more about publishing the extension on the JupyterLab documentation.