Support for URI-based sketch loading in the Web Editor

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.js
• https://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.

Start by reviewing the linked Processing SCHEMA.md and the issue's examples for base64, URL-based sketches, and preferences. Define the Web Editor's supported URI subset and verify that pde://-style query links can open the intended sketches or apply preferences, including the documented CORS and URL-length limitations.