P5.js Desktop Editor

Hello everyone.

Please let me know if this is not the place for my question.

Im trying to compile my own version of the old p5.js desktop editor but is an absolute headache, due to the fact that it is abandoned and some of the dependencies no longer exist.

The reason for doing this is that is a great tool for teaching kids and yung people without the troubles of a web editor (internet conecction issues mainly) or external tools with less friendly interfaces.
Of course i could use the latest version compiled but i want to add some my own functions and keywords that simplify the problems of the students, i dont want to add that functions for every student computer, just simply give them an editor who got everything they need.

After hours of trying I have a compiled version of the editor, but dont run any sketch.

Someone has worked on this topic? Or managed to get a working own-compiled version of the editor?
Or maybe, someone with deeper experience in node apps?

For now, the p5.js mode for Processing is not an option, as far as i test it, i wasnt been able of use a web camera in it (but maybe i am wrong).

Thank you

If you really need an offline version of the P5.js editor, then why don’t you just download the editor webpage?

Alternatively you can use whatever basic text editor your want, and then refresh the browser page to see your changes.

As for the Processing editor, I don’t see why it would have any restrictions that P5.js by itself doesn’t have, but I haven’t specifically tried it so I suppose I could be wrong.

As I say before, the good-old desktop editor has the advantage of being a closed package that can be distributed easily in workshop or courses.
Get the actual web editor running in every computer of the participants in a workshop, for example, is simply impossible.

Using another editor, such text editors or something similiar always is an option, but from the pedagogical point of view, especially for people who didnt code before is not very friendly.

Maybe Im wrong too about de Processing mode, but in a few test I ran i wasnt able to run some examples, for example a simple video capture.

Edit 1: Yes, Im wrong about the Processing mode. Just run a videoCapture. I’m going to do some deeper tests.

I wonder how difficult it would be to add a visual studio code extension for p5js. If it could be made fairly user friendly then it would also ease the transition from web editors to offline code editors.

I don’t know about about visual studio code, but thanks to your message i just found this for Atom.

Didn’t tested yet.

1 Like

Hi @zenemig, let me know if you have any questions about the toolbar! It’s about as close as a desktop editor as there is these days.

I’ve been thinking that it might also be possible to take the code from the current web-editor and compile it as an electron app so it would be a stand alone editor.

I’ve had 0 issues setting up the web based editro in my classes and workshops, it’s really simplified the process in fact (especially for sharing and talking about each others sketches) but I totally understand the issues on a low/no internet connection setting and the problems it presents, which is what lead me to make the toolbar in the first place.

One thing I’d love to add to the toolbar or have someone make a pull request for is a build process to include a copy of the reference that is offline. This is something I constantly run into when working in low/no internet settings.

1 Like

Hi @bmoren, thank you for your response! I didn’t have the time yet to test the toolbar but I’ll test it tomorrow.
I don’t have experience with atom packages so I cant promise I can help adding the offline reference, but I’ll look at the code and see what can I do!

I think that get a compiled version of the web editor is a great idea to get an offline editor, who work exactly as the web editor. It can create an updated ecosystem of editors for p5.js. Please let me know if you decide to make the test to compile the web editor into an electron app!

This sounds like a great idea.

Another way to do this might be adding support for the Offline Web Applications API directly to the p5 web editor. http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html

That wouldn’t help you with totally disconnected computers, but it would mean that if you could load the page once, low bandwidth / spotty connectivity wouldn’t be an issue.

1 Like

Ah I like this idea, I think I will explore the possibility of adding offline capabilities to web editor.

I think it’s a good thing that comments appear about the need for an updated tool to work offline with p5.js, especially for educators who work in environments with unstable / non-existent internet connections and that takes into account ideas and fundamentals about accessibility and usability of Processing.

I am going to contribute to the p5js-toolbar because it is what I can now face due to the availability of free time, but I would like to know if someone starts working on the ideas that were said by @jeremydouglass, @bmoren and @parc6502


hi! p5.js web editor developer here. i support integrating the offline web applications api into the web editor. it’s unfortunately not something i can devote time to at the moment, but if anyone wants to work on it, they are more than welcome.