node package manager


Browserified dat-gui library

=dat.GUI= A lightweight graphical user interface for changing variables in JavaScript.

Get started with dat.GUI by reading the tutorial at [].

==Packaged Builds== The easiest way to use dat.GUI in your code is by using the built source at {{{build/dat.gui.min.js}}}. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.

In your {{{head}}} tag, include the following code: {{{


==Using dat.GUI with require.js== Internally, dat.GUI uses [ require.js] to handle dependency management. If you're making changes to the source and want to see the effects of your changes without building, use require js.

In your {{{head}}} tag, include the following code: {{{


Then, in {{{path/to/main.js}}}: {{{ require([ 'path/to/gui/module/GUI' ], function(GUI) {

// No namespace necessary var gui = new GUI();

}); }}}

==Directory Contents==

  • build: Concatenated source code.
  • src: Modular code in [ require.js] format. Also includes css, [ scss], and html, some of which is included during build.
  • tests: [ QUnit] test suite.
  • utils: [ node.js] utility scripts for compiling source.

==Building your own dat.GUI==

In the terminal, enter the following:

{{{ $ cd utils $ node build_gui.js }}}

This will create a namespaced, unminified build of dat.GUI at {{{build/dat.gui.js}}}

To export minified source using Closure Compiler, open {{{utils/build_gui.js}}} and set the {{{minify}}} parameter to {{{true}}}.

==Change log==


  • Moved to requirejs for dependency management.
  • Changed global namespace from DAT to dat (lowercase).
  • Added support for color controllers. See [ Color Controllers].
  • Added support for folders. See [ Folders].
  • Added support for saving named presets. See [ Presets].
  • Removed height parameter from GUI constructor. Scrollbar automatically induced when window is too short.
  • dat.GUI.autoPlace parameter removed. Use new dat.GUI( { autoPlace: false } ). See [ Custom Placement].
  • gui.autoListen and gui.listenAll() removed. See [ Updating The Display Manually].
  • dat.GUI.load removed. See [ Saving Values].
  • Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.


  • Migrated from GitHub to Google Code.

==Thanks== The following libraries / open-source projects were used in the development of dat.GUI:

  • [ require.js]
  • [ Sass]
  • [ node.js]
  • [ QUnit] / [ jquery]