# G4js - developing a new GUI library for p5.js (now called canvasGUI)

**URL:** <https://discourse.processing.org/t/g4js-developing-a-new-gui-library-for-p5-js-now-called-canvasgui/36116>\
**Category:** Development\
**Created:** [April 4, 2022, 2:02pm UTC](https://discourse.processing.org/t/g4js-developing-a-new-gui-library-for-p5-js-now-called-canvasgui/36116 "2022-04-04T14:02:13Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [April 8, 2022, 10:14am UTC](https://discourse.processing.org/t/g4js-developing-a-new-gui-library-for-p5-js-now-called-canvasgui/36116/8 "2022-04-08T10:14:05Z")

</div>

> [@quark](#):
>
> I would be interested in knowing what programming IDE you use with TypeScript…

- Formally I used [Atom.io](http://Atom.io) w/ some extensions for TS.
- But currently I’m in [VSC](https://code.visualstudio.com), which got good TS support out-of-the-box.
- I also have both [NodeJs.org](http://NodeJs.org) & [Git](https://git-scm.com) installed to deal w/ [NPM](https://www.npmjs.com) packages & [GitHub](https://github.com) repos.

> [@quark](#):
>
> … and any advise on organizing “Processing / TypeScript / Library Development” environment would be appreciated.

Well, I’ve ended up creating a p5js library template repo just to answer that:

> **[GitHub - GoToLoop/P5JS-Library-Template: Sorta template to develop p5js...](https://github.com/GoToLoop/P5JS-Library-Template)**
>
> Sorta template to develop p5js library addons in TS - GitHub - GoToLoop/P5JS-Library-Template: Sorta template to develop p5js library addons in TS

After unpacking the downloaded project file:

> **[Releases · GoToLoop/P5JS-Library-Template](https://github.com/GoToLoop/P5JS-Library-Template/releases)**
>
> Sorta template to develop p5js library addons in TS - GoToLoop/P5JS-Library-Template

- Double-click file “setup.bat” so it creates the subfolder “node\_modules/” and globally installs the TS compiler “tsc”, the local file server “serve”, the p5js library itself, plus its type definitions; all that based on “package.json” contents.
- That template project has a “tsconfig.json” file which instructs “tsc” to automatically compile every TS file inside subfolder “src/” and output them into subfolder “dist/”; plus their type definitions into subfolder “typings/”.
- In this particular template example I have a class Ball defined in file “dist/ball.mts” which is gonna act as a p5js library addon.
- Also a helper “dist/attribute.mts” file which is imported by “dist/ball.mts”.
- FYI, “.mts” is a new file extension which explicitly defines it as an ECMAScript Module: [16. Modules](http://ExploringJS.com/es6/ch_modules.html)
- The “tsc” compiler will automatically output “.mts” files as “.mjs” btW:

> <https://stackoverflow.com/questions/57492546/what-is-the-difference-between-js-and-mjs-files>

- The last subfolder to discuss is “tests/”, which contains 2 other subfolders “regular/” & “import/”.
- In total there are 4 “.js” files as test example sketches on how to consume the “dist/ball.mjs” library.
- Subfolder “tests/regular/” got files “sketch.js” & “sketch.instance.js”.
- “tests/regular/sketch.js” is a typical p5js sketch in global mode style.
- And “tests/regular/sketch.instance.js” is like the former above, but using instance mode style instead.
- It’s super important that a p5js library addon be compatible w/ both global & instance modes.
- The other 2 sketches in subfolder “tests/import/” teach how to `import` the “dist/ball.mjs” library directly in code w/o using a `<script>` tag in an HTML file:

> **[import - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)**
>
> The static import declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned...

- The “index.html” file loads both sketches from subfolder “tests/regular/”.
- It adds the attribute “data-ball-auto-import” to the “dist/ball.mjs” `<script>` tag.
- The library searches all `<script>` tags for that “data-ball-auto-import” attribute.
- When it’s found, it automatically exposes its class Ball to [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis).
- And it also adds the alternative method **createBall()** to the p5 class.

That’s all for now! Hope it helps you to develop your g4js addon library in TS using ES6 modules:

- [GoToLoop.GitHub.io/P5JS-Library-Template](http://GoToLoop.GitHub.io/P5JS-Library-Template)

---

_[View the full topic](https://discourse.processing.org/t/g4js-developing-a-new-gui-library-for-p5-js-now-called-canvasgui/36116)._