Prototype a Collaborative Editor for Processing

Project Overview

This project is a prototype of a desktop code editor for Processing, experimenting with the use of modern technologies and design with the Processing library.

Background

When I first came across the open call for this project, I immediately began visualizing so many different ideas about how this prototype could look and was so excited about the prospect of designing and building it from the ground up. Live collaboration is a particularly interesting idea and challenge for me, especially in this ever-increasing online world. With online classes becoming a norm, I saw the importance and impact of creating a tool that could make teaching more engaging than watching a screen. I had seen tools like Figma and Miro used in online classrooms in particularly creative ways, and was inspired to have an opportunity to lead this project in the same way.

Project Goals

This project aimed to experiment with:

1. Making code editor development more accessible: By using modern web technologies, we wanted developers to easily contribute and expand the editor’s features, similar to how VSCode supports extension development.
2. Designing a simplified interface for beginners: We designed the editor specifically for students and beginners, with a streamlined user interface that removes complexities like file system management, allowing students to jump straight into coding.
3. Enabling Real-time Collaboration: In this ever-increasing online world, we sought to enable collaboration and community by allowing users to co-create sketches in real time, similar to tools like Google Docs or Figma.

The Processing Collaborative Editor (PCE)

The end result of this project was the Processing Collaborative Editor — a desktop app prototype for Mac and Windows that enables real-time, collaborative coding with Processing. After installation, users can jump into sketch creation immediately.

Highlights

Launching a Sketch: Open the app and immediately start coding.

Launching a Sketch

Testing and Iterating: Test the sketch by pressing the play button.

Testing and Iterating

Collaborative Editing: To collaborate, click “Collaborate” in the dropdown menu next to the sketch’s name. Share the Room ID with collaborators, and they can join by entering their name and ID. You’ll then see their cursors in the editor as you work together.

Collaborative Editing

Real-time Experimentation: Each collaborator can run or save the sketch independently, allowing real-time experimentation without interfering with others.

Real-time Experimentation

Development Timeline

Within the limited window, I tried to be as intentional as possible when progressing the development of this prototype. I wanted to make concrete decisions before moving forward with any actual development. In the past I have had many experiences of attempting to create software with little plan or guidance, which ultimately led to unnecessary or incomplete features.

Month 1 — July

To kick off the project, this month was dedicated to choosing MVP features, and confirming technical feasibility of the idea. We needed to answer questions like:

• Is it possible to run the Processing library through a non-Java based app?
• Should we build the UI from scratch, or lean on an existing IDE framework like VSCodium or Theia?
• What are the available methods of implementing real-time collaboration?

The month was spent doing experiments and proofs of concepts, which confirmed our questions and led us to settle on which key technologies to use. We had interesting conversations with people like Luca Cipriani, former CIO at Arduino, who shared his own experiences with building an IDE.

Month 2 — August

From here, I began prototyping the UI on Figma (Figma file available here), adding all the features we had decided for the final prototype, and creating a design system/tone that was accurate to our goals. I took inspiration from IDEs like VSCode and IntelliJ, and more design-forward apps like the Arc Browser, and incorporated feedback from mentors and colleagues. The editor also has options for dark and light modes, allowing users to decide which mode they prefer. This feature was intended to be similar to how IDEs look, as a way to create some visual similarities if students decide to transition to more powerful tools like VSCode.

Months 3 & 4 — September & October

With the UI set, the last two months were all about development — building out features, refining the app for Mac and Windows, and testing collaboration features with users. There were a lot of hurdles to overcome, which included issues with syncing code during live collaboration sessions, building and deploying apps for MacOS which require a lot of checks from Apple, and implementing all the detailed features of the UI like creating, saving, renaming files.

Key Technologies

Building the Processing Collaborative Editor relied on several technologies that made development fast, modular, and collaborative:

• Electron: Using web technologies (HTML, CSS, JavaScript) to build a desktop app enabled us to reach a broad community of developers, inviting contributions to improve and expand the editor.
• React: Inside Electron, I built the UI as a React app for modularity and easy future customization.
• CodeMirror: For the code editor component, we used CodeMirror 6, which offers a rich, adaptable editing experience.
• Y.js: The backbone of our real-time collaboration, Y.js enabled seamless multi-user editing by handling complex merge logic, with connections managed by a WebSocket server on Render.

Future Vision & Impact

Looking ahead, an editor like this has endless potential. Some features I’d love to include would be:

• Library Imports: An easy way to import the wealth of existing Processing libraries.
• Peer-to-peer Collaboration with WebRTC: Reduced latency and enhanced data privacy for a more connected experience.
• Classroom Integration: Bringing the editor into classrooms to gather feedback from students and educators.

This app is still in beta, and open for community testing and feedback. Please submit any issues or ideas for features through Github!

Learnings

Since this was my first time developing an Electron app, there were many new learnings and experiences that involved a lot of stumbling and late nights. Particularly, when building and deploying desktop apps for MacOS, there were a lot of hoops required to ensure that the app was built with the right certificates and signatures, and applying them to the Processing java library itself. There was also a lot of back and forth with running Processing sketches itself, there were times where it would work and then not work, leading to a lot of frustration and doubt that the core of the app would not work. There were a lot of backup plans if things did not work as expected in order to get a working prototype out by the end of this program. Luckily, many things came together in the last couple weeks.

To see further technical details on this project, see the documentation on the Github repository.

Acknowledgments

A heartfelt thank you to the Processing Foundation for this opportunity, and to my mentors and advisors Sinan, Ted, Raphael, Stef, and my supportive friends and family. Special thanks to Matt Bowe for the project’s creative assets.

You can download the app and find the GitHub repo here. Reach out to me with questions at https://doradocodes.com/.

Links

Download the app: https://doradocodes.github.io/processing-collab-editor/

View the Github repository: https://github.com/doradocodes/processing-collab-editor

Full documentation of the project: https://dora-do.notion.site/Processing-d088271ab9ef4661864886e4d74ace43?pvs=74

Thank you for reading!