Tech Stack Collection Share Vol.6
7 GUI Control Panel Libraries for Front-End Developers
This collection focuses on GUI control libraries for front-end developers. If you are a front-end developer, you will often encounter scenarios where you need to debug the presentation of animations, graphics, and UI interfaces.
The following libraries can be used to quickly create a GUI control panel, where you can use numeric input boxes, sliders, check boxes, color pickers, etc. to configure parameters and quickly control the presentation of the UI, what you see is what you get.
dat.GUI may be the most well-known one, often appearing in demos based on canvas/three.js.
1、dat.GUI[1]
2、lil-gui[2]
3、leva[3]
4、tweakpane[4]
5、knobs[5]
6、guify[6]
7、stats.js[7]
Download comparison
Recommendation
dat.GUI is the most common one, you can see it when you encounter a beautiful Canvas demo in Codepen, often combined with stats.js to pay attention to performance. TweakPane is one I like more, it supports mobile devices, TypeScript, has a more modern interface and rich functions.
References
[1] dat.GUI: https://github.com/dataarts/dat.gui
[2] lil-gui: https://github.com/georgealways/lil-gui
[3] leva: https://github.com/pmndrs/leva
[4] tweakpane: https://github.com/cocopon/tweakpane
[5] knobs: https://github.com/yairEO/knobs
[6] guify: https://github.com/colejd/guify
[7] stats.js: http://mrdoob.github.io/stats.js/
[8] tech-stack.tools: https://tech-stack.tools/