Description
Increasing Access
This feature reduces friction and helps more people (especially newcomers) get started with code faster.
Feature request details
I’d like to suggest considering support for a subset of the URI schema, which was introduced by @Stefterv in Processing 4.4. It will soon be used to open the processing.org examples directly in the PDE—you can see it in action in this PR (edit: I posted a video in a reply below)
The Processing URI schema defines a custom protocol for launching and interacting with the Processing Development Environment (PDE) via specially formatted pde:// links. These links can be used to open sketches, create new ones, load hosted or base64-encoded files, and set preferences, all through a simple URI-based interface.
Bringing a similar schema to the p5.js editor would allow users and external tools to open sketches and code snippets in the Web Editor using links that encode the content. This would improve integration with tutorials, documentation, forum posts, educational platforms, and other third-party tools or code generators.
Since the web editor supports mobile coding, you could even fit a p5 sketch in a QR code ✨
Suggested implementation
We could use a ?pde= query parameter that mirrors the existing pde:// path structure. For example:
https://editor.p5js.org/?pde=sketch/base64/<encoded sketch code>https://editor.p5js.org/?pde=sketch/url/github.com/user/repo/path/to/sketch.jshttps://editor.p5js.org/?pde=preferences?theme=dark
See the schema specifications in SCHEMA.md for more details and examples.
Benefits
Supporting a ?pde= parameter in the p5.js Web Editor would enable new ways of sharing and embedding sketches without requiring them to be saved to a user account. This could be especially helpful for:
- Embedding interactive examples directly into tutorials, blogs, or documentation
- Generating sketches on the fly from code generators or other tools
- Sharing quick one-off demos without creating an account or saving a sketch
- Avoiding the need to maintain two versions of the same sketch—for example, one hosted on your own site and another published in the editor
Note
In many cases, linking to an existing p5.js Web Editor sketch is still the better option; especially if you plan to update or maintain the sketch from your editor account after sharing it. The proposed feature is meant for cases where the sketch doesn’t already exist on the platform or doesn't need to be saved there.
Limitations
- Very large base64 encoded sketches may exceed practical URL length limits in some browsers.
- Remote file loading would require proper CORS headers or proxying.
Would love to hear thoughts or questions from the team. Happy to help explore a proof of concept if helpful.