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 [2.3kb]
• Contribute on GitHub!

Basic Usage

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

var controllableObject = 
   {   
	  numberProperty: 20,
	  constrainedNum: 0,
	  notchedNum: 240,
	  textProperty: "a string",
	  anotherTextProperty: "another string",
	  booleanProperty: false,
	  anotherBooleanProperty: false,
	  functionProperty: function() {
		 alert("I am a function!");
	  }
   };

window.onload = function() {

   GUI.start();
  
   // Creates a number box
   GUI.add(controllableObject, "numberProperty");

   // Creates a slider (min, max)
   GUI.add(controllableObject, "constrainedNum", -100, 100)
   
   // Creates a slider with notches
   GUI.add(controllableObject, "notchedNum", 0, 800, 100)

   // Creates a text field
   GUI.add(controllableObject, "textProperty");

   // Creates a checkbox
   GUI.add(controllableObject, "booleanProperty");

   // Creates a button
   GUI.add(controllableObject, "functionProperty").setName("Fire a Function");

};

</script>