# Canvas based GUI library for p5.js

**URL:** <https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119>\
**Category:** Gallery\
**Created:** [January 16, 2021, 6:11pm UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119 "2021-01-16T18:11:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [January 16, 2021, 6:11pm UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119/1 "2021-01-16T18:11:41Z")

</div>

Hello community,

I’d like to offer you a early preview to a p5.js library that allow p5.js users to create GUI based programs on top of the canvas.

The library itself is implemented using p5.js API and is drawing all the controls on top of the canvas.

The intent is to use the library on [codeguppy.com](https://codeguppy.com) (for teaching purposes) and also made available as open source. Are you interested?

Please provide feedback here, or by sending a Tweet to [@codeguppy](https://twitter.com/codeguppy)

**Example 1:**

Basic GUI demo

![cgwin](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1f07d9847687f89c7d6a54a896c860a6bb0efeef.gif)

**Example 2:**

Running almost unmodified p5.js sketches in windows.

![cgwin_sketch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c47e83c1fdd64879be02d9c2ee9974769fc6a56b.gif)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 17, 2021, 10:43am UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119/2 "2021-01-17T10:43:10Z")

</div>

This looks really exciting especially as I am keen to create web-based interactive guides to support my own Java based libraries.

I have been thinking for a long time about creating a cut down version of G4P using JS but to be honest my JS programming knowledge is really basic and there have always been others things in Java for me to program.

So I am really interested in this JS Gui library and I will definitely be looking at it and your website in more detail. Thanks and well done the website looks awesome . 👍

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [January 23, 2021, 4:53am UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119/3 "2021-01-23T04:53:21Z")

</div>

![wincg4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3ec05a077acdb749f163e3744c873e2ebe7aba99.gif)

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [January 23, 2021, 4:56am UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119/4 "2021-01-23T04:56:22Z")

</div>

There is another demo on my Twitter page [@codeguppy](https://twitter.com/codeguppy) – animation too big to upload here.

Looking forward to your feedback!

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 15, 2022, 7:41pm UTC](https://discourse.processing.org/t/canvas-based-gui-library-for-p5-js/27119/5 "2022-02-15T19:41:57Z")

</div>

@codeguppy

Do you have a tutorial page?