p5.js Electron mode for Processing

Desktop Support for p5.js via a New Processing Mode

This mode integrates p5.js into the Processing Development Environment (PDE) and provides a desktop runtime based on Electron.

Features

• Run and stop p5.js sketches directly from Processing
• Electron-based embedded browser for rendering
• Error reporting in the editor
• Built-in examples (WIP)
• Syntax highlighting (Note: The current syntax highlighting system has known limitations and may change)
• Works on Linux, macOS, and Windows
• PNPM for Node package and dependency management
• Automatic installation of required tools:
  • PNPM
  • Node.js
  • Electron

Exporting Sketches

• Export p5.js sketches as standalone desktop apps
• Uses electron-builder for packaging

Installation

From the Processing Editor (PDE)

1. Download Processing
2. Install it (see the install instructions)
3. Open the Contribution Manager in Processing and install p5.js Mode (experimental).

Using Prebuilt Releases

1. Download the latest .pdex file from the Releases page.
2. Opening the .pdex file in Processing

From Source (for contributors)

• The mode is implemented in Kotlin
• Mode-specific code lives in the top-level p5js directory
• Build and distribution tasks are handled with Gradle

See the wiki for architecture notes.

Licensing

License information can be found in LICENCE.md.

Acknowledgement

This project was created by Stephan Max (@stephanmax) as part of the 2025 Building Bridges (pr05) Grant from the Processing Foundation. The project was mentored by Stef Tervelde (@Stefterv).

For more context, watch Stephan’s presentation at OpenAssembly 2025 and read his blog post.