GUI library for canvas?

[ddabrahim]

Hi.

I'm looking for a GUI library to create gui elements like buttons, check boxes, sliders..etc over the canvas element so I can use it with any framework. I was searching on the internet but mostly I find libs that require editing HTML and CSS manually to add gui elements. I would prefer something that I can use from JavaScript only and to be easy to use for someone with little JS knowledge.

I did find 2 libs that is similar to what I'm looking for:

• dat.gui.js: https://github.com/dataarts/dat.gui
• quicksettings.js: https://github.com/bit101/quicksettings

I am not entirely happy with this 2 libs because they are designed to create panels and to add gui elements to the panel. Is there any other similar libs I could use that allow me to just create a button, input a slider and position it anywhere over the canvas? I would appreciate any help. Thanks.

 

Edited March 3, 2020 by ddabrahim

[b10b]

You might be able to narrow it down if you first decide on a canvas rendering library?  Else I imagine the problem with finding a gui lib for "raw" canvas is that it still needs some kind of basis to manage assets, interactions, basic scene graph etc - therefore soon becomes a rendering library with opinions of its own?  Whereas the non-opinionated gui exists by default - conventional html and css.

Both CreateJS and PixiJS have mature third party gui / component libraries.  Also, do properly consider the html route - I've seen many game guis realised with React as a layer over the canvas, it can be a good separation of concerns.

[ddabrahim]

Hi.

Thank you for the suggestions. The problem with gui libs of certain rendering libs like Pixi.js is that, often the libs are out of date and not compatible with the latest version and usually, such libs are using the drawing functions of the rendering library and not able to draw outside the canvas. I was wondering if there is any lib that would allow me to create a button, input, checkbox..etc and position it anywhere even over the canvas using DOM manipulation and CSS maybe but without the complexity involved using simple JS functions. The two libs I have linked are very close to what I'm looking for and I have discovered them by accident, they won't come up in google search either and was wondering if there is any other similar libs hidden out there somewhere.

Thanks.

Edited March 4, 2020 by ddabrahim

[stupot]

I've been down that rabbit hole, there's a lot of UI libraries out there, determining which ones do what and how easy to use is time consuming.  You might think your requirement is quite broad, but it's probably quite specific when you consider all of the UI applications.  Your requirement sounds like a HUD to me, so be sure to include that term in your searches, I'd start with something like "javascript ui hud" in google.

I use dat.gui, it has a specific goal and does that well, it's not a general purpose gui.  I also use FomanticUI, it has the feature set and look I wanted, but it's steep learning curve. Both of these I use to display and control the underlying application during development, not seen in the production build, they have a technical/functional feel and wouldn't be appropriate everywhere, eg for player UI in a game.

There's a lot of old libs out there, no longer being maintained.  If keeping up to date with current browsers and standards is important, then bear that in mind.  I remember I took an interest in w2ui, had decent functionality, easy to start with.  Also, Phaser3 has a domElement, if you wanted to use that for your canvas it would give you easy access to html elements in front of the canvas - Phaser3 domElement examples.

[ddabrahim]

Thanks a lot. Adding "hud" to my search indeed worked. I have a lot more interesting results now and the ones you mentioned also looks interesting. Thank you. ? 

[Martí Serra]

I developed a JavaScript library that lets users create user interfaces on the canvas element. You can build graphical elements of different types and you can even create your own types of graphical elements like a tetris piece, a sudoku... This is the library: canvasui-js.com.