# Q5\*js ESM Converter

**URL:** <https://discourse.processing.org/t/q5-js-esm-converter/46131>\
**Category:** Gallery\
**Tags:** contributions\
**Created:** [March 31, 2025, 11:05pm UTC](https://discourse.processing.org/t/q5-js-esm-converter/46131 "2025-03-31T23:05:17Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [March 31, 2025, 11:05pm UTC](https://discourse.processing.org/t/q5-js-esm-converter/46131/1 "2025-03-31T23:05:17Z")

</div>

I’ve coded a command line utility that remotely grabs the “q5.js” library file and creates a “q5.mjs” ECMAScript Module (ESM) version of it, allowing us to use JS keyword `import` to load it directly in our sketch files w/o polluting the global namespace:

```js
import Q5 from "./q5.mjs";

```

`q5*js` is a lighter alternative for the [`p5*js`](https://p5js.org) library:

> **[q5.js](https://q5js.org)**
>
> Beginner friendly graphics powered by WebGPU and optimized for interactive art! q5.js is also compatible with popular p5.js addons including p5.sound, ml5.js, and p5play.

Download & detailed instructions are found in this “GitHub Gist” link below:

> <https://gist.github.com/GoToLoop/f3787d5ceab12ad5e1d26cca083f40df>

And btW, this is the GitHub discussion that’s led me to create this command line converter utility:

> <https://github.com/q5js/q5.js/issues/112>
>
> I usually use p5 and Vite to make music visualizer for my music.
> I heard about a…nd q5.js, and I tried to use that, but \`Q5\` does not have method such as \`createCanvas\`, while global namespace does.
> 
> It would be good if there is an another entrypoint that does not set anything on global namespace, but export the Q5 class, which works like this:
> \`\`\`ts
> import { Q5 } from "q5/esm";
> 
> const q = new Q5("instance");
> q.setup = () =\> {
> q.createCanvas(...);
> };
> 
> // and so on...
> \`\`\`
> 
> So that it would be easier to integrate q5 on normal page.

Reddit Cross-posts:

- processing: [Reddit - The heart of the internet](https://reddit.com/r/processing/comments/1jpwa9e/q5js_esm_converter/)
- p5js: [Reddit - The heart of the internet](https://reddit.com/r/p5js/comments/1jpwika/q5js_esm_converter/)