p5-notebook

A minimal Jupyter Notebook UI for p5.js kernels, powered by JupyterLite and the p5.js kernel.

p5-screencast-1.webm

Usage

✨ Try it in your browser! ✨

Features 🎁

Opens with Jupyter Notebook by default 📒

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

p5-screencast-1.webm

JupyterLab interface 🧪

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

p5-screencast-2.webm

Live preview of HTML-based sketches ⚡

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

p5-screencast-3.webm

Support for themes 🌈

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

p5-screencast-4.webm

Support for additional display languages 🌐

Just like with JupyterLab, the p5 notebook also supports additional display languages: French, Italian, Polish, Simplified Chinese and Spanish:

p5-screencast-5.webm

JupyterLab and Notebook features 🎨

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

p5-screencast-6.webm

Real Time Collaboration

Coming soon!

Development

This repo is a JupyterLite deployment with three JupyterLab extensions in packages/: the p5 logo and the p5.js light and dark themes. Make sure Node.js, pnpm and uv are installed, then:

# create the environment, install the dependencies and build the extensions
uv sync

# link the extensions in development mode
uv run pnpm develop

# rebuild the extensions after making changes
uv run pnpm build

# or rebuild them automatically on changes
uv run pnpm watch

# build and serve the JupyterLite site
uv run jupyter lite build
uv run jupyter lite serve

To bump the version of all the packages:

pnpm bump:version 0.2.0

UI tests

The UI tests use Galata and Playwright against a JupyterLite build of the site:

cd ui-tests
pnpm install
pnpm exec playwright install chromium

# build the site with the Galata helpers
uv run pnpm build

# run the tests
uv run pnpm test

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