Clarification needed of p5.js-widget tool features.

[Mamatha1718]

I would like to know this details from p5.js-widget tool in this repo there is no discussions tab. So i am asking in this issue.
I am eager to know some doubts about p5.js-widget tool. This tool work on below embed features or not. using simple embed code <script src ="sketch.js " autosave />
showcode
code editable
instance mode
auto sound
different sketches in one page with different features.
In documentation of p5.js-widget tool there is only two features autosave and auto complete.
Your answers are very helpful to me.
Thank you in advance.

[citelao]

Hey @Mamatha1718! I see no one has answered this, so I'll do my best.

I'm not sure I understand your question, but it sounds like you're asking:

Does this project support other features, like:

• Showing/hiding code
• Non-editable code
• Instance mode?
• Automatically playing sound

And does it support different sketches in one page using different selections of features?

Simply: not really.

	Answer
Showing/hiding code	🤔 You can probably set data-preview-width to be super big to "hide" code
Non-editable code	❌ Not supported
Instance mode	(I don't understand what this is)
Automatically playing sound	🤔 Maybe it'll work with data-autoplay? Browsers often prevent sound from playing without user interaction
Different sketches in one page	✅ Yup! Each demo on the demo page uses different features.

Hope that helps!

[Mamatha1718]

Hi @citelao , Thank you for your clarification, Instance mode in p5.js allows you to run multiple sketches on a single page without conflicts. Normally, in global mode, all p5.js functions (setup(), draw(), etc.) are global and can clash if there are multiple sketches.

👉 In instance mode, each sketch is wrapped inside an object, preventing conflicts and allowing multiple independent sketches on the same page.

Example of Instance Mode (Multiple Sketches on One Page)

   ` // Second Sketch (Blue Square)
    let sketch2 = (p) => {
        p.setup = function() {
            p.createCanvas(200, 200);
            p.background(220);
        };
        p.draw = function() {
            p.fill(0, 0, 255);
            p.rect(75, 75, 50, 50);
        };
    };
    new p5(sketch2, "sketch2");
</script>

` In this way instance mode support more than one sketch code with no conflicts.

How Does Instance Mode Help?
✔ Prevents conflicts – Each sketch is an independent object.
✔ Multiple sketches on the same page with different behaviors.
✔ Can customize each sketch separately (e.g., different sizes, colors, interactions).

Does the p5.js-widget Tool Support Instance Mode?

Thanks In Advance😊

[citelao]

Sounds like you want to run different sketches on one page.

Yes, the tool supports that (the demo page does this).

[Mamatha1718]

Hi @citelao Thank you for your clarification. but the demo page gives the error

"404
File not found
The site configured at this address does not contain the requested file."

Can you share again the demo page.

Thank You in advance.

[Mamatha1718]

Hi @citelao ,
I would like to participate in gsoc 2025 processing foundation, I choose the project Friendly Sketch Embedder for p5.js.
Can you give me any suggestions on this project praposal. Any best approaches for this project embedding code better chances of getting selected. Your suggestions are very helpful to me.

Friendly Sketch Embedder for p5.js
Create a user-friendly tool that guides a p5.js user of any level to help showcase their work in their own websites. Anyone can make a sketch with p5.js - as interactive art, as teaching material, as data visualization, as game, as diary, and as anything else they can imagine! A p5.js sketch is a canvas element that can be included in any website, and existing tutorials help to do this. How can embedding a sketch be streamlined, and support all the different kinds of use-cases and customizations? For example, a teacher may want to include code snippets; an artist may want to arrange multiple sketches next to one another.

Expected outcomes: A possible technical outcome could be a standalone interactive webpage with user-friendly settings that helps visitors to generate sketch embed code depending on their needs. The community impact can be very wide, making it easier for users to take their work beyond a classroom or a tutorial and into their own interactive online space.
Skills: Some familiarity of JavaScript is needed, but this could be a good project to sharpen your skills!
Possible mentor: Dora Do
Size and Rating: 90H, Easy/Medium
Your suggestions are very helpful to me.
Thanks in advance.

[citelao]

This is the demo page: https://toolness.github.io/p5.js-widget/

I don't think this issue is the best place to ask for GSOC project feedback. Consider the P5 Discord or forum instead.

[Mamatha1718]

Hi @citelao , Thank you for your suggestions. I will ask in discord channel about gsoc.
Thank You.