Embedding p5.js web editor in external site

p5.js Beginners
1

Is there any way to embed the whole p5 text editor in some external site rather than just the sketch part. This would help users to edit the code then and there itself to get the feedback.

1 Like
2

Yes, you could use an <iframe> element or host the web editor yourself.

2 Likes
3

Here is what that looks like:

    <iframe id="p5.js web editor embed"
        title="p5.js web editor embed"
        width="800"
        height="600"
        src="https://editor.p5js.org/">
    </iframe>

Note however that many platforms restrict the use of iframe. For example, you cannot post an iframe to this forum.

Edit

However, to be clear, you may embed editor.p5js.org web editors to this forum. You may also embed sketchpad.cc, openprocessing.org, trinket.io, and codeguppy.com. For more on embedding sketches on this forum specifically, see:

1 Like
4

Check this link in the P5.js GH’s wiki. Although it seems it is not up to date as it doe snot include the info shared by Jeremy and Sven.

Kf

2 Likes
5

I stumbled upon this thread from a google search, and I figured I’d mention another option. This is what I’ve been using, and it works really well:

https://toolness.github.io/p5.js-widget/

4 Likes
6

Jumping off the back of this question - is there a way to control the theme of the editor when I embed the iframe into my code?

7

If the page you’re embedding using the iframe is on the same domain as the page hosting the iframe, or has permissions granted to the hosting domain using CORS policy, then you can inject CSS, see: html - How to apply CSS to iframe? - Stack Overflow

However if you are trying to embed editor.p5js.org on your own site then that is not going to work.

1 Like