"Real" Live Coding / Dumb Live Reloading / Accessing Editor State from user scripts

Increasing Access

Hello,

I'm currently working on p5.xr, and I would like to share examples with the web editor. Because of how WebXR works, the user has to press a button to give access to an immersive session. Entering this mode takes a few seconds and it's quite cumbersome to have to go in and out of the mode to change simple parameters.

I would like to have a "real live coding" experience, as with p5.live, as you can see below. I don't want to use p5.live, because the sharing functionality is not working as well as with the web editor for now.

https://github.com/processing/p5.js-web-editor/assets/1434442/da8f46f0-8fb5-4d4c-8eee-765e35830cf0

Feature request details

As mentioned in #3 currently the page reloads completely on changes. Having a live mode would entail only reloading parts of the sketch.

For my use case at least, a quick and imperfect way to prototype is all I need. I know that having this work "properly" would involve handling a lot of edge cases and could be quite tricky.

I made a simple script today that works fine locally: https://github.com/TiborUdvari/p5.dumbLiveReload/blob/main/src/index.js. I'm using a polling approach, which works fine on my localhost, but I think that could be problematic with the web editor.

I've quickly checked the networking in the editor, and on save there seems to be a PUT request that sends all the data to the server.

My questions, to be able to make this work properly with the editor would be:

• How can a script being loaded with the editor (in the preview iframe) know when there was a save event or a change event
• How can a script access the global state of the editor to be able to get the script and execute it

Thanks a lot!

Start by reading the linked p5.dumbLiveReload src/index.js and tracing the editor's save PUT request. Then inspect how the preview iframe is loaded and whether it can observe save or change events and access editor state. Done would be a defined, working approach for reloading sketch parts without a full page reload.