# Using ES6 Modules in the p5.js Web Editor

**URL:** <https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258>\
**Category:** Beginners\
**Created:** [August 6, 2022, 8:13pm UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258 "2022-08-06T20:13:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://discourse.processing.org/u/Pieter)\
**Post date:** [August 6, 2022, 8:13pm UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258/1 "2022-08-06T20:13:12Z")

</div>

I’m trying to use modules on the web editor, but I can’t seem to get it to work because it cannot resolve the relative paths. Is it even possible? Any help would be greatly appreciated, for my specific use case I want to introduce some kids to programming using the p5 editor but also create some utility libraries for use in exercises.

---

<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:** [August 7, 2022, 3:28am UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258/2 "2022-08-07T03:28:23Z")

</div>

> [@Pieter](#):
>
> I’m trying to use modules on the web editor, but I can’t seem to get it to work…

I don’t use that web editor so I dunno if it’s possible there.  
However I had success loading modules on [Glitch.com](http://Glitch.com):

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Your very own basic web page, ready for you to customize.

Also when I posted on GitHub’s gist:

> <https://gist.github.com/GoSubRoutine/da4939559d8b786df13f5694ea2edd30>
>
> There are more than three files. show original

I was able to visualize the modularized sketch on [Bl.ocks.org](http://Bl.ocks.org):

> <https://gist.github.com/GoSubRoutine/da4939559d8b786df13f5694ea2edd30>
>
> There are more than three files. show original

---

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://discourse.processing.org/u/Pieter)\
**Post date:** [August 7, 2022, 10:32am UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258/3 "2022-08-07T10:32:32Z")

</div>

Thanks, I didn’t know about Glitch, that might be worth looking into, it certainly looks neat.

That said, I would still like to see if I can get it working in the p5 editor before I start doing the song and dance of testing a dozen different online editors, each with their own limitations you only find out about after a week of use.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 7, 2022, 3:58pm UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258/4 "2022-08-07T15:58:54Z")

</div>

Another thread which may or may not be helpful:  
[https://discourse.processing.org/t/how-to-access-p5js-functions-when-using-es6-modules/21359](https://discourse.processing.org/t/how-to-access-p5js-functions-when-using-es6-modules/21359)

---

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://discourse.processing.org/u/Pieter)\
**Post date:** [August 7, 2022, 4:32pm UTC](https://discourse.processing.org/t/using-es6-modules-in-the-p5-js-web-editor/38258/5 "2022-08-07T16:32:23Z")

</div>

Found some pointers on Github issues:

> <https://github.com/processing/p5.js-web-editor/issues/1933>
>
> \#### Nature of issue?
> 
> \- Existing feature enhancement
> 
> \_\*\*NOTE:\*\* I am not s…ure if this is technically an enhancement request or not. If it is not possible to \`import\` other files into a sketch in the Web Editor, then this is an enhancement request. (Otherwise, I suppose it’s a…support request (?).)\_
> 
> 
> \#### Feature enhancement details:
> 
> I’m learning p5.js, and loving it so far. The web editor definitely makes it easier to jump in and play!
> 
> After modifying an existing example, the code got long enough for me to want to split it up into multiple files. However, I don’t want to pollute the global namespace (I actually started out by modifying the example to use P5 in instance mode), so I want to split the code up using JS modules.
> 
> But I keep getting the following error in the Web Editor:
> 
> \`\`\`
> Module name, './config.js' does not resolve to a valid URL.
> \`\`\`
> 
> But that file is in the same folder, so I don’t know why this is happening.  
> 
> (I even tried renaming the file to use the \`.mjs\` extension, but no luck.)
> 
> So…
> 
> \*\*How can I \`import\` other files into a sketch on the Web Editor?\*\*

This seems to answer the issue I have, haven’t tried it yet. It confirms my suspicion that import statements are not resolved to work with the file listing as presented in the editor.