# Multiple p5 sketches on one page

**URL:** <https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035>\
**Category:** Beginners\
**Created:** [February 23, 2021, 7:55pm UTC](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035 "2021-02-23T19:55:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![add2fic](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@add2fic](https://discourse.processing.org/u/add2fic)\
**Post date:** [February 23, 2021, 7:55pm UTC](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035/1 "2021-02-23T19:55:31Z")

</div>

Hi, I’m trying to add multiple p5 sketches on one page. I’m trying to use the .parent(‘x’) function to put the canvases inside of their own divs, when I use one it shows up just fine, but when I include two, the other one disappears. Does anyone know why this is happening?

This is the set up I am using in p5 for each of the javascript files.

```auto
function setup() {
var canvas = createCanvas(windowWidth, windowHeight/2);
  canvas.parent('bubbles-holder');
}

```

this is what I include in the html file:

```auto
<div id="bubbles-holder"></div>

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [February 23, 2021, 8:19pm UTC](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035/2 "2021-02-23T20:19:01Z")

</div>

Unfortunately default mode (global) doesn’t work as two sketches’ namespace clash. You need to use instance mode

[![](https://img.youtube.com/vi/Su792jEauZg/hqdefault.jpg "9.11: Instance Mode (aka "namespacing") - p5.js Tutorial") ](https://www.youtube.com/watch?v=Su792jEauZg)

> **[Global and instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

And if you have further questions please post your sketch so it’s easier to spot the issues!

---

<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:** [February 24, 2021, 9:13am UTC](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035/3 "2021-02-24T09:13:38Z")

</div>

> [@Why cant I run 2 5pjs sketches on a html website?](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/2):
>
> Use an \<iframe\> for the 2nd sketch: framed_picture[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

> [@Multiple instances of the same p5js sketch?](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765/2):
>
> B/c it’s a global mode sketch, you can have at most 1 per page. As a workaround, you can place other global mode instances of it inside their own \<iframe\> tag: [Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe) Or simply convert it to instance mode, so you can have multiples of it on the same page context: [GitHub.com/processing/p5.js/wiki/Global-and-instance-mode](http://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode) Here’s an example of 4 instances of the same sketch running on the same page: [Matter-js-Bouncing-Colorful-Balls.Glitch…](http://Matter-js-Bouncing-Colorful-Balls.Glitch.me/all.html)