# Run p5js with Parcel

**URL:** <https://discourse.processing.org/t/run-p5js-with-parcel/9681>\
**Category:** Libraries\
**Created:** [March 27, 2019, 2:16pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681 "2019-03-27T14:16:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lotas94](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Lotas94](https://discourse.processing.org/u/Lotas94)\
**Post date:** [March 27, 2019, 2:16pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/1 "2019-03-27T14:16:12Z")

</div>

Hi there,

I’m trying to run a script based on p5js library, it works well in a classic file (index.html, css, and scripts) but if I run this with parcel (npm run dev), there are no errors but the elements expected are not created in the page.

(I create a canvas in the setup function, to have a cursor trail one my page, but the canvas don’t appears when i run width Parcel)

Do someone know how to fix that ?

I share my repository : [https://github.com/Diarit-S/Site-Portfolio](https://github.com/Diarit-S/Site-Portfolio)

Sorry for my english and thanks for the help !

---

<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:** [March 27, 2019, 2:46pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/2 "2019-03-27T14:46:04Z")

</div>

no idea, but i see at

> index.html

you link to a old p5.js version

```auto
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

```

[p5.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/p5.js) !

just for info, good luck.

---

<div class="post-metadata">

**Author:** ![Lotas94](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Lotas94](https://discourse.processing.org/u/Lotas94)\
**Post date:** [March 27, 2019, 2:50pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/3 "2019-03-27T14:50:50Z")

</div>

Thanks for that ! It’s not working with the latest version too

---

<div class="post-metadata">

**Author:** ![mebble](https://avatars.discourse-cdn.com/v4/letter/m/9de0a6/32.png) [@mebble](https://discourse.processing.org/u/mebble)\
**Post date:** [March 27, 2019, 7:31pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/4 "2019-03-27T19:31:03Z")

</div>

@Lotas94 Hey there I can help you. Parcel bundles the libraries that are `import`ed into your code. Moreover, when you do this with p5, you’ll need to use the [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) of p5. This is because Parcel will create separate scopes for all modules (i.e. no more global variables!).

I have a project that does exactly this (parcel and p5). You can see [the code](https://github.com/mebble/imfx) and learn from there.

---

<div class="post-metadata">

**Author:** ![Lotas94](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Lotas94](https://discourse.processing.org/u/Lotas94)\
**Post date:** [March 27, 2019, 8:03pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/5 "2019-03-27T20:03:44Z")

</div>

Thank you for your response mebble ! I will check the instance mode and your work ! I’m coming back to give news 🙂

---

<div class="post-metadata">

**Author:** ![Lotas94](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Lotas94](https://discourse.processing.org/u/Lotas94)\
**Post date:** [March 27, 2019, 8:38pm UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/6 "2019-03-27T20:38:03Z")

</div>

@mebble thankkkkk youu it works ! And I learn somthing new ! Have a nice week !

---

<div class="post-metadata">

**Author:** ![mebble](https://avatars.discourse-cdn.com/v4/letter/m/9de0a6/32.png) [@mebble](https://discourse.processing.org/u/mebble)\
**Post date:** [March 28, 2019, 4:06am UTC](https://discourse.processing.org/t/run-p5js-with-parcel/9681/7 "2019-03-28T04:06:00Z")

</div>

Glad I could help! Happy coding 🤓