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

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.