p5-notebook

A minimal Jupyter Notebook UI for p5.js kernels.

✨ Try it in your browser! ✨

Status

This is still an experiment 🧪.

Feel free to open an issue if you have any feedback, and PRs are also welcome! Thanks!

Dev install

Make sure Node.js is installed.

yarn
yarn run build
npx http-server

Open http://localhost:8080 in your browser.

There is also a watch command to automatically rebuild the application when there are new changes:

yarn run watch

How it works

This notebook interface is built using components from the JupyterLab computational environment.

JupyterLab is the next-gen UI for Project Jupyter, and is itself built as a set of extensions. These extensions are modular and can be reused in alternative frontends such as this notebook interface.

Jupyter front-ends usually rely on a server known as the Jupyter Server (also called the Notebook Server). This server is written in Python and handles request coming from the client, such as starting a new kernel or retrieving the content of a Jupyter notebook. The kernels usually run on the host machine, but it is also possible to have kernels running on a remote machine.

Because the p5 notebook runs entirely in the browser, it relies on a very minimal Jupyter Server that also runs in the browser and exposes (parts of) the notebook server REST API. This makes it easier to reuse components from core JupyterLab and swap the backend to an alternative one running in the browser.

p5.js kernels also run in the browser in their own IFrame. The IFrame provides the execution engine for the kernel and this is where its state is kept.

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