I made an open source p5js live code editor (with VJ performance focus)

Hey guys!

I made a p5js live coding webapp in React / Typescript. My motivation was largely for my own use, but I’ve designed the project and development environment in a way that should facilitate easy open source development and collaboration. Anyone interested in giving it a try or helping contribute? Not sure anyone’s even tested it other than me, so I’m open to any feedback!

Try it out at vjcode.art

It compiles the code live, and let’s you:

  • add scripts that are always preloaded (or preload scripts per sketch)
  • simple mapping of the canvas to any quadratic shape
  • save color palettes and use them in sketches
  • Sketch code on another window for performing
  • powerful (ish) controls with commands so you don’t need the menu
  • preloaded p5 audio and midi

It has a couple starter sketches to get you started, but it would be cool if it had more tutorial sketches!

Here’s the repository: GitHub - julesvirallinen/vj-p5-live: p5js livecode platform optimized for live performing reply or hit me a message on instagram or the github discussions if you want to be part of this :))

Here’s a quick demo video if the embedding works:

EDIT: embedding failed by here’s the link https://www.instagram.com/p/CmE7v2NoDUw/

If you’re looking for just a live coding editor P5LIVE is probably your best choice (and I’ll probably be using it for a long time still), but I created this when I realized that I’m not really able to develop or improve it easily. The code here is obviously not perfect, as I’ve been busting my balls to just get it working, but it would be cool if someone else gets something out of this too. The main focus with this at the moment is to facilitate easy performing with P5js.

Also if someone is googling react instance mode processing / p5.js code then this might be a good project to look for for inspiration.


I fixed your Github link :wink:


Thanks! I was nerfed to 2 links :smiley: