# Embedding p5.js web editor in external site

**URL:** <https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400>\
**Category:** Beginners\
**Created:** [March 5, 2020, 3:19am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400 "2020-03-05T03:19:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [March 5, 2020, 3:19am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/1 "2020-03-05T03:19:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [March 5, 2020, 9:01am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/2 "2020-03-05T09:01:47Z")

</div>

Yes, you could use an [`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) or [host the web editor yourself](https://github.com/processing/p5.js-web-editor).

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 7, 2020, 9:23pm UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/3 "2020-03-07T21:23:13Z")

</div>

Here is what that looks like:

```auto
    <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](http://editor.p5js.org) web editors to this forum. You may also embed [sketchpad.cc](http://sketchpad.cc/), [openprocessing.org](http://openprocessing.org), [trinket.io](http://trinket.io), and [codeguppy.com](http://codeguppy.com). For more on embedding sketches on this forum specifically, see:

- [Processing web sketch embeds on this forum](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [March 8, 2020, 2:03pm UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/4 "2020-03-08T14:03:04Z")

</div>

Check this [link](https://github.com/processing/p5.js/wiki/Embedding-p5.js) 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

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 16, 2021, 1:07am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/5 "2021-01-16T01:07:46Z")

</div>

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/](https://toolness.github.io/p5.js-widget/)

---

<div class="post-metadata">

**Author:** ![rmon](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@rmon](https://discourse.processing.org/u/rmon)\
**Post date:** [June 9, 2021, 3:58am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/6 "2021-06-09T03:58:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 9, 2021, 7:43am UTC](https://discourse.processing.org/t/embedding-p5-js-web-editor-in-external-site/18400/7 "2021-06-09T07:43:08Z")

</div>

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](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe)

However if you are trying to embed [editor.p5js.org](http://editor.p5js.org) on your own site then that is not going to work.