# How to embed a Processing sketch onto an HTML

**URL:** <https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265>\
**Category:** Coding Questions\
**Created:** [January 7, 2019, 9:13am UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265 "2019-01-07T09:13:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![delorean](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@delorean](https://discourse.processing.org/u/delorean)\
**Post date:** [January 7, 2019, 9:13am UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/1 "2019-01-07T09:13:00Z")

</div>

Hi everyone,

I’m very new to processing and programming, I hope you can help, I have bee trying to embed a Processing sketch onto an HTML using this information: [https://cs.nyu.edu/~kapp/cs101/processing\_on\_the\_web/](https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/)

the embedding actually works when I use a Firefox browser

but not in the Google browser - (i think this may have something to do with local files?) but can’t be sure  
I have also managed to embed a basic sketch in P5

As I looked at the thread: [How to get processing java sketch onto a webpage?](https://discourse.processing.org/t/how-to-get-processing-java-sketch-onto-a-webpage/2738)  
Just to say, As most of my creative work is in Processing I would ideally rather not rewrite my code in P5

can anyone offer any advice on the best/simplest way to go about doing a simple embed in HTML?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 7, 2019, 9:20am UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/2 "2019-01-07T09:20:35Z")

</div>

in CHROME goto  
menu / more tools / developer tools  
OR  
context menu / Inspect

select CONSOLE  
and you see a error // but might not be able to do anything about .

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 7, 2019, 12:35pm UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/3 "2019-01-07T12:35:24Z")

</div>

> **[Can i import my stuff into wallpaper engine?](https://Discourse.Processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153)**
>
> \*\*Welcome 🙂 \*\* My name is Luc(16) and last week I installed processing. the past week I have been making quite some stuff with processing already. I showed what I made to a couple of friends and asked me if I would be so kind to get the application...

---

<div class="post-metadata">

**Author:** ![boneman](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@boneman](https://discourse.processing.org/u/boneman)\
**Post date:** [January 25, 2019, 6:36pm UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/4 "2019-01-25T18:36:09Z")

</div>

I also found the guide while attempting to embed an Open Processing Sketch to a website. It is the closest I’ve come to being successful at it, but my sketch specifically includes libraries while his guide does not.

Does your includes libraries? If not, does anyone know how one would go about embedding a sketch that includes libraries?

---

<div class="post-metadata">

**Author:** ![delorean](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@delorean](https://discourse.processing.org/u/delorean)\
**Post date:** [January 28, 2019, 12:26pm UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/5 "2019-01-28T12:26:33Z")

</div>

Great thats for the tip! - really helpful

---

<div class="post-metadata">

**Author:** ![delorean](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@delorean](https://discourse.processing.org/u/delorean)\
**Post date:** [January 28, 2019, 12:28pm UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/6 "2019-01-28T12:28:11Z")

</div>

Hi\<

my sketch included no libraries, how did your upload go?

---

<div class="post-metadata">

**Author:** ![boneman](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@boneman](https://discourse.processing.org/u/boneman)\
**Post date:** [January 28, 2019, 2:21pm UTC](https://discourse.processing.org/t/how-to-embed-a-processing-sketch-onto-an-html/7265/7 "2019-01-28T14:21:47Z")

</div>

It did not work. If you haven’t heard of this already though, I found this to work if you know how to convert old sketches to new: [https://editor.p5js.org](https://editor.p5js.org)

It has option to embed and add libraries that are compatible with the web.
