dat-gui: A Lightweight GUI for JavaScript Variables

November 19th, 2012 by Adrian


Recently I’ve started using this really cool lightweight GUI for allowing the easy tweaking of your JavaScript variables at runtime. It’s called dat-gui and it is available for download from the Chrome experiments website. The source code is hosted on Google Code and there is a handy tutorial showing how to use it here.

It makes it really easy to display sliders, colour pickers, checkboxes, buttons, drop-down menus etc in a nice clean panel (that can also be hidden) that update your JavaScript variables on-the-fly. It is also possible to create presets and save bespoke settings.

The interface looks something like this …

dat-gui Example

Here is my example of it in use.

Canvas Experiment 22

Posted in Canvas, Javascript | No Comments »

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.