gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

• Download the minified source [9.8kb]
• Contribute on GitHub!

Basic Usage

<script type="text/javascript" src="gui.min.js"></script>
<script type="text/javascript">

window.onload = function() {

   var fizzyText = new FizzyText("gui-dat");

   GUI.start();
   
   // Adds a text field
   GUI.add(fizzyText, "message");
   
   // Adds sliders with min and max
   GUI.add(fizzyText, "maxSize", 0.5, 7);
   GUI.add(fizzyText, "growthSpeed", 0.01, 1);
   GUI.add(fizzyText, "speed", 0.1, 2);
   
   // Adds sliders with min, max and increment.
   GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
   
   // Adds a boolean checkbox
   GUI.add(fizzyText, "displayOutline");

   // Adds a function button
   GUI.add(fizzyText, "explode")
   
};

</script>

• gui-dat will infer the type of the property you're trying to add
  (based on its initial value) and create the corresponding control.
• The properties must be public, i.e. defined by this.prop = value.