p5-notebook

A minimal Jupyter Notebook UI for p5.js kernels.

Usage

✨ Try it in your browser! ✨

Features 🎁

Opens with RetroLab by default 📒

By default, the p5 notebook opens with the simpler retro interface.

JupyterLab interface 🧪

The JupyterLab interface is still accessible via the View > Open in JupyterLab menu:

Live preview of HTML-based sketches ⚡

With the JupyterLab interface, .html files can be edited and rendered live with the built-in HTML viewer:

Support for themes 🌈

The p5 notebook includes the default JupyterLab Light and Dark themes, as well as p5.js branded Light and Dark themes:

Support for additional display languages 🌐

Just like in JupyterLab, the p5 notebook also supports additional display languages like French and Simplified Chinese:

Real Time Collaboration

Users can edit code and work together on the same sketch:

JupyterLab and RetroLab features 🎨

Most of the JupyterLab and RetroLab features are also available, such as switching to the Simple Interface and opening the command palette:

Dev install

This repo includes a couple of additional plugins to tweak the Jupyter UI. To setup a local environment and be able to iterate on them, make sure Node.js is installed, then:

# Clone the repo to your local environment
# Change directory to the fork directory

# create a new enviroment
mamba create --name p5-notebook -c conda-forge python=3.9 yarn jupyterlab jupyter-packaging
conda activate p5-notebook

# Install package in development mode
python -m pip install -e .

# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite

# Rebuild the extension Typescript source after making changes
jlpm run build

Related projects

• nb5.js, a notebook for p5js sketches (proof of concept): https://github.com/aparrish/nb5js-proof-of-concept

• p5.js Jupyter Widget: https://github.com/jtpio/ipyp5

• [archived / demo] p5.js in the Classic Jupyter Notebook with Jupyter Widgets: https://github.com/jtpio/p5-jupyter-notebook

• Jupyter Kernels, right inside JupyterLab: https://github.com/deathbeds/jyve

• JupyterLite has:

  • Python kernel backed by Pyodide running in a Web Worker
    • Initial support for interactive visualization libraries such as altair, bqplot, ipywidgets, matplotlib, and plotly
  • JavaScript and P5.js kernels running in an IFrame

  https://github.com/jupyterlite/jupyterlite