Create interactive Jupyter websites with JupyterLite

JupyterCon 2023

2023-05-10

Jeremy Tuloup

• https://github.com/jtpio
• https://twitter.com/jtpio
• https://fosstodon.org/@jtp

About

Technical Director at QuantStack

Core Jupyter Developer

What is JupyterLite?

JupyterLite is a JupyterLab distribution that runs entirely in the web browser, backed by in-browser language kernels.

"Normal Jupyter"

JupyterLite

Lightweight Jupyter Frontend running in the browser

• no Python server
• no command line
• no need to install Python and other packages on the user machine
• can be hosted as a static website

Boots in seconds

The jupyter-lite CLI is a Static Site Generator (SSG)

# install the CLI
pip install jupyterlite-core

# build the website
jupyter lite build

It generates static assets that can be served easily

├── api
│   └── translations
│       ├── all.json
│       └── en.json
├── bootstrap.js
├── build
│   ├── 9507.1e6cc5d.js
│   ├── 9602.62bf0f1.js
│   ├── 9621.e2e8b5d.js
│   ├── ...
│   ├── repl
│   │   ├── bundle.js
│   ├── retro
│   │   ├── bundle.js
│   ├── schemas
│   │   ├── all.json
│   │   ├── @jupyterlab
│   │   │   ├── application-extension
│   │   │   │   ├── commands.json
│   │   │   │   ├── context-menu.json
│   │   │   │   ├── shell.json
│   │   │   │   └── sidebar.json
│   ├── themes
│   │   └── @jupyterlab
│   │       ├── theme-dark-extension
│   │       │   ├── index.css
│   │       │   └── index.js
...

...
│   │       └── theme-light-extension
│   │           ├── index.css
│   │           └── index.js
├── config-utils.js
├── extensions
│       └── xeus-python-kernel
│           └── static
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.data
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.js
│               ├── python-3.10.2-h_hash_26_cpython.0.data
│               ├── python-3.10.2-h_hash_26_cpython.0.js
│               ├── python_data.js
│               ├── remoteEntry.35b4eac217ec6bf078a4.js
├── lab
│   ├── favicon.ico
│   ├── index.html
│   ├── jupyter-lite.ipynb
│   ├── jupyter-lite.json
│   ├── package.json
│   ├── tree
│   │   └── index.html
│   └── workspaces
│       └── index.html
...

Easy to deploy

Served via well-cacheable, static HTTP(S) on most static web hosts

Standing on the shoulders of giants

• Built from the ground-up using JupyterLab components and extensions
• The frontend communicates to the in-browser kernels via the Jupyter Protocol

Wasm powered Jupyter running in the browser

• https://developer.mozilla.org/en-US/docs/WebAssembly

Interactive Computing in the browser

• Python kernels:
  • Pyodide
  • Xeus Python
• Visualizations:
  • matplotlib
  • ipywidgets
  • plotly
  • and more...

Embed a live Python console on your website

Embed with:

<iframe
  src="https://jupyterlite.github.io/demo/repl/index.html?kernel=python&toolbar=1"
  width="100%"
  height="500px"
>
</iframe>

Or even the full JupyterLab UI

numpy.org

sympy.org

jupyterlite-sphinx

Deploy your own on GitHub Pages

Quickstart: https://github.com/jupyterlite/xeus-python-demo

Adding notebooks, files and static assets

Create a notebooks folder and add a notebook and a CSV file:

ls notebooks

demo.ipynb iris.csv

Build with the --contents flag:

jupyter lite build --contents notebooks

Adding extensions to the user interface

In build-environment.yml:

name: build-env
channels:
  - conda-forge
dependencies:
  # custom themes
  - jupyterlab-night
  # extra language pack
  - jupyterlab-language-pack-fr-FR

Adding packages to the Python runtime

With the Xeus Python kernel, edit environment.yml:

name: xeus-python-kernel
channels:
  - https://repo.mamba.pm/emscripten-forge
  - https://repo.mamba.pm/conda-forge
dependencies:
  - ipycanvas
  - numpy
  - pandas
  - # add more dependencies here

Available packages

• Pure Python packages (noarch) on conda-forge
• Emscripten compiled packages on emscripten-forge

How-To Guides

• Documentation: https://jupyterlite.readthedocs.io/en/latest/
• Configuration files, extensions, storage, kernels...

Deploy static web applications with Voici

Before

jupyter lite build --contents notebooks

After

# build with the Voici CLI
voici build --contents notebooks

# to keep the JupyterLab and Notebook interfaces available
voici build --contents notebooks --apps lab --app retro

This repo is a JupyterLite website

• Repo: https://github.com/jtpio/jupytercon-2023-jupyterlite
• JupyterLite: https://jtpio.github.io/jupytercon-2023-jupyterlite
• Voici: https://jtpio.github.io/jupytercon-2023-jupyterlite/voici/tree

Strengths

• Easy to deploy and scale (static files)
• Interactive computing in the browser accessible to more people
• Simpler for users (no need to install Python and other packages locally)
• Educational use cases
• Reproducibility time capsule

Limitations

• Suited for lighter workloads
• Not all packages are available (or ever will be)
• Subset of Python running in the browser
• Initial asset download can be big (~30MB), then cached by the browser

What's next?

• Update JupyterLite to JupyterLab 4 and Notebook 7
• Real Time Collaboration rework
• Improvements to the Pyodide / Emscripten Forge toolchain and packages
• Improvements to the Xeus Python kernel:
  • Install packages at runtime
  • Install packages from PyPI
  • Lazy loading, optimizations

JupyterCon 2023

Resources

• How-To Guides: https://jupyterlite.readthedocs.io/en/latest
• Demo repository: https://github.com/jupyterlite/xeus-python-demo
• JupyterLite tutorial at PyConDE & PyData Berlin 2023

Thanks!

Thanks to all the contributors of JupyterLite, Pyodide, Emscripten Forge, and the Jupyter Community!

• Presentation: https://github.com/jtpio/jupytercon-2023-jupyterlite
• Live version: https://jtpio.github.io/jupytercon-2023-jupyterlite/files/index.html