Support for URI-based sketch loading in the Web Editor

[SableRaf]

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.

[SableRaf]

For illustration, here's how it will work on the Processing website:

2025-03-27.14.56.00.mp4

[RAHULDAS6009]

hi @SableRaf ,can i work on this

[SableRaf]

Hey @RAHULDAS6009!

This issue is marked as "Needs Discussion," which means it can't be assigned just yet. The community needs to discuss whether the feature fits within the roadmap and have an implementation plan agreed upon first.

Since it might take some time before this issue is ready to work on, I’d recommend exploring other ways to contribute. The project's contributor guide has helpful tips to get you started.

A good next step could be checking out the good first issues. These are beginner-friendly tasks that will help you get familiar with the project.

If you’re ever unsure or need guidance, feel free to reach out on the p5.js Discord. The community is always happy to help!

Thanks for your enthusiasm and interest in contributing 😊