# Is there a collaborative p5 editor (similar to Google Docs, for example?)

**URL:** <https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386>\
**Category:** Teaching\
**Created:** [October 6, 2020, 5:15pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386 "2020-10-06T17:15:08Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [October 6, 2020, 5:15pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/1 "2020-10-06T17:15:08Z")

</div>

Hi all,

I teach a course in p5.js and my students are currently remote because of the pandemic. I’m looking for an editor/IDE that would allow students to all code in the same document at the same time. Essentially I’m looking for something that would function like Google Docs does, where when one person makes a change, everyone else can see that change taking place in real time.

Does such a thing exist for p5? And if it doesn’t exist for p5, does it exist for Processing, perhaps?

Thanks!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 6, 2020, 5:41pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/2 "2020-10-06T17:41:24Z")

</div>

Try the co-coding feature of p5LIVE!

> **[P5LIVE](https://teddavis.org/p5live/)**
>
> p5.js collaborate live-coding vj environment!

The co-coding panel is on the right side, and it gives you a URL that you can share. For example, I just created a sketch that you can join now:

- [https://teddavis.org/p5live/?cc=28r35](https://teddavis.org/p5live/?cc=28r35)

…when you join, you will create a name. Code will be synced between all the editors and constantly recompiled on changes. This is a livecoding tool, and it displays sketches in the background behind the code (rather than in a split pane like the p5js web editor).

There are instructions for managing collab features in the help menu, and on the repo readme: [https://github.com/ffd8/P5LIVE](https://github.com/ffd8/P5LIVE)

Hope that is helpful.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 6, 2020, 6:02pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/3 "2020-10-06T18:02:26Z")

</div>

That is a great question!

I think you might want to have a look at Glitch: they have a template of a server serving a p5js project: [https://glitch.com/edit/#!/p5js?path=views%2Fsketch.js%3A1%3A0](https://glitch.com/edit/#!/p5js?path=views%2Fsketch.js%3A1%3A0)

I find the interface a bit confusing, but you can remix any project and the “owner” can share a link that allows simultaneous edition.

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [October 6, 2020, 6:23pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/4 "2020-10-06T18:23:39Z")

</div>

This is fantastic; thank you so much Jeremy! This is precisely what i was looking for.

I’ll also be teaching Processing remotely in the winter semester. Do you happen to know if Processing has a similar platform?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 6, 2020, 6:29pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/5 "2020-10-06T18:29:18Z")

</div>

> [@SheCurvesMobius](#):
>
> I’ll also be teaching Processing remotely in the winter semester. Do you happen to know if Processing has a similar platform?

While it doesn’t have robust sync like Google docs, one option is to use Jupyter notebooks with Calysto Processing. That isn’t actually running Java Processing on the web, unfortunately – it is running Processing.js, which uses the Java syntax but then transpiles it to JavaScript so that it will run in browser. So your students can learn the Java syntax in a web environment, but they won’t be able to use the robust Java library ecosystem (opencv, minim, etc.) that they would while using PDE on the desktop.

> **[GitHub - Calysto/calysto\_processing: Calysto Processing kernel for Jupyter](https://github.com/Calysto/calysto_processing)**
>
> Calysto Processing kernel for Jupyter. Contribute to Calysto/calysto\_processing development by creating an account on GitHub.

The project homepage has some links to examples of pedagogical use.

If you haven’t worked with hosted Jupyter notebooks before you should be aware that you can get simultaneous edit access, but those are potentially destructive overwrite edits, and you can’t see what the other person is doing – it isn’t live co-editing. So you need to coordinate really carefully when you open a notebook that someone else is editing, and then have them load your changes. But it is doable.

(I should also note that it is possible to host a straight Java kernel in online Jupyter notebooks – [GitHub - SpencerPark/IJava: A Jupyter kernel for executing Java code.](https://github.com/SpencerPark/IJava) – but then your students would need to import processing as a library and program Processing in straight Java syntax, with public, private, et cetera. That could be really challenging for beginners.)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 6, 2020, 6:51pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/6 "2020-10-06T18:51:32Z")

</div>

Another Processing sketch hosting site (both p5.js & Pjs) w/ co-editing capability: 😇

> **[Studio Sketchpad : an open studio for creating beautiful code](http://p5js.sketchpad.cc/?&cookieShouldBeSet=1)**

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 6, 2020, 8:00pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/7 "2020-10-06T20:00:11Z")

</div>

@GoToLoop – how does co-editing work on sketchpad? Is it live like in Google Docs, and can you invite people et cetera?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 6, 2020, 8:27pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/8 "2020-10-06T20:27:09Z")

</div>

> [@jeremydouglass](#):
>
> , and can you invite people et cetera?

Never did co-editing before.  
AFAIK, n1 w/ an ‘edit’ link can modify the sketch at the same time.  
Each account will have its own highlight color edit on the shared sketch.

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 7, 2020, 1:39am UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/9 "2020-10-07T01:39:07Z")

</div>

CodePen has a [collab mode](https://blog.codepen.io/documentation/collab-mode/) (if you sign up for a pro account). You could load-in p5 from the [CDN](https://cdn.jsdelivr.net/npm/p5/lib/), set up your project using the [‘hosted’ approach](https://codepen.io/tabreturn/pen/bGeGxdN). You can test this out in free (non-collab) mode; you write your p5 code in the _JS_ pane of the CodePen editor.

There are free alternatives to CodePen (other front-end development playgrounds) although I haven’t researched/experimented with those.

EDIT: [https://liveweave.com](https://liveweave.com/DafYRe) looks like a decent free alternative. You can test the _Team Up_ feature, using the invite link across multiple incognito/private browser windows to simulate a group session. The nice thing is you don’t have to create an account to host or join.

EDIT: For some reason, Liveweave didn’t work properly with the latest p5; it wouldn’t run after the first change I made to my JS/p5 code. I used v1.0.0 as a workaround for now: `<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>`

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 7, 2020, 8:44pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/10 "2020-10-07T20:44:02Z")

</div>

Maybe [https://repl.it/](https://repl.it/) + p5.js is an option too. Needs sign up.  
(example [https://repl.it/@villares/basic-p5js#index.html](https://repl.it/@villares/basic-p5js#index.html))

I have tried to simulate co-edit with a “join link” and it seemed to work.

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [October 7, 2020, 9:46pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/11 "2020-10-07T21:46:40Z")

</div>

Thanks for all of these great suggestions everyone!!

To clarify, it sounds like there is no online collaborative coding platform for Processing. Am I right on that?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 8, 2020, 5:34am UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/12 "2020-10-08T05:34:12Z")

</div>

For (Java-dialect) Processing, another option might be to have your students use a programming text editor with a document co-editing feature. For example, Atom has a co-editing plugin called Teletype, and it also has a Processing plugin. (untested)

> **[Code together in real time with Teletype for Atom](https://blog.atom.io/2017/11/15/code-together-in-real-time-with-teletype-for-atom.html)**
>
> Writing code with another programmer is a great way to absorb knowledge, challenge yourself with new perspectives, and ultimately write better software. It can also be a fulfilling way to get to know the mind of another human being. Unfortunately,...

…and Atom has Processing (Java) support with the Script plugin.

- [https://atom.io/packages/script](https://atom.io/packages/script)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 8, 2020, 8:18pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/13 "2020-10-08T20:18:12Z")

</div>

> [@SheCurvesMobius](#):
>
> To clarify, it sounds like there is no online collaborative coding platform for Processing. Am I right on that?

That is correct – to the best of my knowledge, there is no collaborative online coding platform for Processing. Some options are:

1. use Processing syntax, but it is actually Processing.js (JavaScript)
2. use a desktop editor plugin that enables code collaboration, allowing you to run / compile on the desktop.
3. use online Java-kernel notebooks like Jupyter Callypso, and write Java code that uses Processing as a library
4. use a Java collaborative coding platform, possibly? see below:

There are a very very few options for collaborative editing and compiling of Java / JVM on the web – for example, collabedit, CodeBunk, or CodeCollab. [https://codecollab.io/](https://codecollab.io/) But these tend to be for-profit proprietary platforms, and they only support full Java, they don’t have dedicated Processing language modes – you would have to use Processing as a library in Java, and there might not be a method for display. In general, Java is harder to compile / run through a web interface than JS or Python – there aren’t as many options.

---

<div class="post-metadata">

**Author:** ![xrispy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/xrispy/32/7682_2.png) [@xrispy](https://discourse.processing.org/u/xrispy)\
**Post date:** [October 10, 2020, 5:53am UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/14 "2020-10-10T05:53:13Z")

</div>

I am definitely interested in this 🙂

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [December 17, 2020, 6:17pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/15 "2020-12-17T18:17:45Z")

</div>

Hey Villares, just wanted to give a shout out to your comment. I’ve looked into it, and I think that Glitch is going to work really well for my needs. Thanks for sharing 🙂

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [December 19, 2020, 11:45am UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/16 "2020-12-19T11:45:46Z")

</div>

Update:  
I’m now looking into repl.it instead of Glitch. After playing more extensively with Glitch I’ve found that it takes about 15 to 30 seconds to load a page (feels like the dial-up days), and then fairly frequently, will say that it can’t be loaded at all. I’ve asked around and others have experienced this too. That’s a big strike against when I’ll be opening dozens of sketches per class, and working with as many student projects.

---

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [January 7, 2021, 5:50am UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/17 "2021-01-07T05:50:38Z")

</div>

This is amazing! I’ve always felt a huge drawback of repl.it is not having a whiteboard to draw on, whereas this solves it. What was your inspiration to start this project?

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [October 19, 2021, 3:22pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/18 "2021-10-19T15:22:55Z")

</div>

FYI – for using Processing collaboratively online, at the latest [CCFest 21](https://ccfest.rocks/register), [Coding Rooms](https://www.codingrooms.com/) was presented as a viable option. It’s not exactly a simple GUI – but lets one run a virtual machine to run Processing sketches.

Update on P5LIVE, you’ll find a [video series here](https://www.youtube.com/playlist?list=PLVFTsPTlaBzJlf6XMJki9thI3JIsC6_y-) walking through the tool (COCODING pending…!).

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 5, 2024, 1:56pm UTC](https://discourse.processing.org/t/is-there-a-collaborative-p5-editor-similar-to-google-docs-for-example/24386/19 "2024-12-05T13:56:59Z")

</div>

I know this is an old topic but worth reviving (?) to mention Dora’s Processing Collaborative Editor project:

> [@Processing Collaborative Editor (pr05 grant project)](https://discourse.processing.org/t/processing-collaborative-editor-pr05-grant-project/45263):
>
> Hello! My name is Dora and I recently have been working on the pr05 2024 grant project, Prototyping a Collaborative Editor for Processing. The Processing Collaborative Editor (PCE) is a desktop app that aims to make collaborative coding with Processing easier, more accessible, and ideal for both beginners and educators. Built using Electron, React, CodeMirror, and Y.js, the editor allows users to co-create Processing sketches in real time, drawing inspiration from tools like Google Docs and Figm…