add documentation generator, update JSDoc.

API.md

@@ -0,0 +1,423 @@
+# dat.GUI API
+
+Details about the classes, methods, and properties provided by dat.GUI. For more
+hands-on examples, see the dat.GUI [tutorial](http://workshop.chromeexperiments.com/examples/gui).
+
+<!--- API BEGIN --->
+
+## Classes
+
+<dl>
+<dt><a href="#GUI">GUI</a></dt>
+<dd><p>A lightweight controller library for JavaScript. It allows you to easily
+manipulate variables and fire functions on the fly.</p>
+</dd>
+<dt><a href="#Controller">Controller</a></dt>
+<dd><p>An &quot;abstract&quot; class that represents a given property of an object.</p>
+</dd>
+<dt><a href="#NumberController">NumberController</a> ⇐ <code>dat.controllers.Controller</code></dt>
+<dd><p>Represents a given property of an object that is a number.</p>
+</dd>
+</dl>
+
+<a name="GUI"></a>
+
+## GUI
+A lightweight controller library for JavaScript. It allows you to easily
+manipulate variables and fire functions on the fly.
+
+**Kind**: global class  
+
+* [GUI](#GUI)
+    * [new GUI([params])](#new_GUI_new)
+    * [.domElement](#GUI+domElement) : <code>DOMElement</code>
+    * [.parent](#GUI+parent) : <code>dat.gui.GUI</code>
+    * [.autoPlace](#GUI+autoPlace) : <code>Boolean</code>
+    * [.closeOnTop](#GUI+closeOnTop) : <code>Boolean</code>
+    * [.preset](#GUI+preset) : <code>String</code>
+    * [.width](#GUI+width) : <code>Number</code>
+    * [.name](#GUI+name) : <code>String</code>
+    * [.closed](#GUI+closed) : <code>Boolean</code>
+    * [.load](#GUI+load) : <code>Object</code>
+    * [.useLocalStorage](#GUI+useLocalStorage) : <code>Boolean</code>
+    * [.add(object, property, [min], [max], [step])](#GUI+add) ⇒ [<code>Controller</code>](#Controller)
+    * [.addColor(object, property)](#GUI+addColor) ⇒ [<code>Controller</code>](#Controller)
+    * [.remove(controller)](#GUI+remove)
+    * [.destroy()](#GUI+destroy)
+    * [.addFolder(name)](#GUI+addFolder) ⇒ <code>dat.gui.GUI</code>
+    * [.open()](#GUI+open)
+    * [.close()](#GUI+close)
+    * [.getRoot()](#GUI+getRoot) ⇒ <code>dat.gui.GUI</code>
+    * [.getSaveObject()](#GUI+getSaveObject) ⇒ <code>Object</code>
+
+<a name="new_GUI_new"></a>
+
+### new GUI([params])
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [params] | <code>Object</code> |  |  |
+| [params.name] | <code>String</code> |  | The name of this GUI. |
+| [params.load] | <code>Object</code> |  | JSON object representing the saved state of this GUI. |
+| [params.auto] | <code>Boolean</code> | <code>true</code> |  |
+| [params.parent] | <code>dat.gui.GUI</code> |  | The GUI I'm nested in. |
+| [params.closed] | <code>Boolean</code> |  | If true, starts closed |
+| [params.closeOnTop] | <code>Boolean</code> |  | If true, close/open button shows on top of the GUI |
+
+**Example**  
+```js
+// Creating a GUI with options.
+var gui = new dat.GUI({name: 'My GUI'});
+```
+**Example**  
+```js
+// Creating a GUI and a subfolder.
+var gui = new dat.GUI();
+var folder1 = gui.addFolder('Flow Field');
+```
+<a name="GUI+domElement"></a>
+
+### gui.domElement : <code>DOMElement</code>
+Outermost DOM Element
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+parent"></a>
+
+### gui.parent : <code>dat.gui.GUI</code>
+The parent <code>GUI</code>
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+autoPlace"></a>
+
+### gui.autoPlace : <code>Boolean</code>
+Handles <code>GUI</code>'s element placement for you
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+closeOnTop"></a>
+
+### gui.closeOnTop : <code>Boolean</code>
+Handles <code>GUI</code>'s position of open/close button
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+preset"></a>
+
+### gui.preset : <code>String</code>
+The identifier for a set of saved values
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+width"></a>
+
+### gui.width : <code>Number</code>
+The width of <code>GUI</code> element
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+name"></a>
+
+### gui.name : <code>String</code>
+The name of <code>GUI</code>. Used for folders. i.e
+a folder's name
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+closed"></a>
+
+### gui.closed : <code>Boolean</code>
+Whether the <code>GUI</code> is collapsed or not
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+load"></a>
+
+### gui.load : <code>Object</code>
+Contains all presets
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+useLocalStorage"></a>
+
+### gui.useLocalStorage : <code>Boolean</code>
+Determines whether or not to use <a href="https://developer.mozilla.org/en/DOM/Storage#localStorage">localStorage</a> as the means for
+<code>remember</code>ing
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+add"></a>
+
+### gui.add(object, property, [min], [max], [step]) ⇒ [<code>Controller</code>](#Controller)
+Adds a new [Controller](#Controller) to the GUI. The type of controller created
+is inferred from the initial value of <code>object[property]</code>. For
+color properties, see [addColor](addColor).
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>String</code> | The name of the property to be manipulated |
+| [min] | <code>Number</code> | Minimum allowed value |
+| [max] | <code>Number</code> | Maximum allowed value |
+| [step] | <code>Number</code> | Increment by which to change value |
+
+**Example**  
+```js
+// Add a string controller.
+var person = {name: 'Sam'};
+gui.add(person, 'name');
+```
+**Example**  
+```js
+// Add a number controller slider.
+var person = {age: 45};
+gui.add(person, 'age', 0, 100);
+```
+<a name="GUI+addColor"></a>
+
+### gui.addColor(object, property) ⇒ [<code>Controller</code>](#Controller)
+Adds a new color controller to the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.  
+
+| Param |
+| --- |
+| object | 
+| property | 
+
+**Example**  
+```js
+var palette = {
+  color1: '#FF0000', // CSS string
+  color2: [ 0, 128, 255 ], // RGB array
+  color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
+  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
+};
+gui.addColor(palette, 'color1');
+gui.addColor(palette, 'color2');
+gui.addColor(palette, 'color3');
+gui.addColor(palette, 'color4');
+```
+<a name="GUI+remove"></a>
+
+### gui.remove(controller)
+Removes the given controller from the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+
+| Param | Type |
+| --- | --- |
+| controller | [<code>Controller</code>](#Controller) | 
+
+<a name="GUI+destroy"></a>
+
+### gui.destroy()
+Removes the GUI from the document and unbinds all event listeners.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+addFolder"></a>
+
+### gui.addFolder(name) ⇒ <code>dat.gui.GUI</code>
+Creates a new subfolder GUI instance.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>dat.gui.GUI</code> - The new folder.  
+**Throws**:
+
+- <code>Error</code> if this GUI already has a folder by the specified
+name
+
+
+| Param |
+| --- |
+| name | 
+
+<a name="GUI+open"></a>
+
+### gui.open()
+Opens the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+close"></a>
+
+### gui.close()
+Closes the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+getRoot"></a>
+
+### gui.getRoot() ⇒ <code>dat.gui.GUI</code>
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>dat.gui.GUI</code> - the topmost parent GUI of a nested GUI.  
+<a name="GUI+getSaveObject"></a>
+
+### gui.getSaveObject() ⇒ <code>Object</code>
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>Object</code> - a JSON object representing the current state of
+this GUI as well as its remembered properties.  
+<a name="Controller"></a>
+
+## Controller
+An "abstract" class that represents a given property of an object.
+
+**Kind**: global class  
+
+* [Controller](#Controller)
+    * [new Controller(object, property)](#new_Controller_new)
+    * [.domElement](#Controller+domElement) : <code>DOMElement</code>
+    * [.object](#Controller+object) : <code>Object</code>
+    * [.property](#Controller+property) : <code>String</code>
+    * [.onChange(fnc)](#Controller+onChange) ⇒ [<code>Controller</code>](#Controller)
+    * [.onFinishChange(fnc)](#Controller+onFinishChange) ⇒ [<code>Controller</code>](#Controller)
+    * [.setValue(newValue)](#Controller+setValue)
+    * [.getValue()](#Controller+getValue) ⇒ <code>Object</code>
+    * [.updateDisplay()](#Controller+updateDisplay) ⇒ [<code>Controller</code>](#Controller)
+    * [.isModified()](#Controller+isModified) ⇒ <code>Boolean</code>
+
+<a name="new_Controller_new"></a>
+
+### new Controller(object, property)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>string</code> | The name of the property to be manipulated |
+
+<a name="Controller+domElement"></a>
+
+### controller.domElement : <code>DOMElement</code>
+Those who extend this class will put their DOM elements in here.
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+object"></a>
+
+### controller.object : <code>Object</code>
+The object to manipulate
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+property"></a>
+
+### controller.property : <code>String</code>
+The name of the property to manipulate
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+onChange"></a>
+
+### controller.onChange(fnc) ⇒ [<code>Controller</code>](#Controller)
+Specify that a function fire every time someone changes the value with
+this Controller.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fnc | <code>function</code> | This function will be called whenever the value is modified via this Controller. |
+
+<a name="Controller+onFinishChange"></a>
+
+### controller.onFinishChange(fnc) ⇒ [<code>Controller</code>](#Controller)
+Specify that a function fire every time someone "finishes" changing
+the value wih this Controller. Useful for values that change
+incrementally like numbers or strings.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fnc | <code>function</code> | This function will be called whenever someone "finishes" changing the value via this Controller. |
+
+<a name="Controller+setValue"></a>
+
+### controller.setValue(newValue)
+Change the value of <code>object[property]</code>
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| newValue | <code>Object</code> | The new value of <code>object[property]</code> |
+
+<a name="Controller+getValue"></a>
+
+### controller.getValue() ⇒ <code>Object</code>
+Gets the value of <code>object[property]</code>
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: <code>Object</code> - The current value of <code>object[property]</code>  
+<a name="Controller+updateDisplay"></a>
+
+### controller.updateDisplay() ⇒ [<code>Controller</code>](#Controller)
+Refreshes the visual display of a Controller in order to keep sync
+with the object's current value.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+<a name="Controller+isModified"></a>
+
+### controller.isModified() ⇒ <code>Boolean</code>
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: <code>Boolean</code> - true if the value has deviated from initialValue  
+<a name="NumberController"></a>
+
+## NumberController ⇐ <code>dat.controllers.Controller</code>
+Represents a given property of an object that is a number.
+
+**Kind**: global class  
+**Extends**: <code>dat.controllers.Controller</code>  
+
+* [NumberController](#NumberController) ⇐ <code>dat.controllers.Controller</code>
+    * [new NumberController(object, property, [params])](#new_NumberController_new)
+    * [.min(minValue)](#NumberController+min) ⇒ <code>dat.controllers.NumberController</code>
+    * [.max(maxValue)](#NumberController+max) ⇒ <code>dat.controllers.NumberController</code>
+    * [.step(stepValue)](#NumberController+step) ⇒ <code>dat.controllers.NumberController</code>
+
+<a name="new_NumberController_new"></a>
+
+### new NumberController(object, property, [params])
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>string</code> | The name of the property to be manipulated |
+| [params] | <code>Object</code> | Optional parameters |
+| [params.min] | <code>Number</code> | Minimum allowed value |
+| [params.max] | <code>Number</code> | Maximum allowed value |
+| [params.step] | <code>Number</code> | Increment by which to change value |
+
+<a name="NumberController+min"></a>
+
+### numberController.min(minValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a minimum value for <code>object[property]</code>.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| minValue | <code>Number</code> | The minimum value for <code>object[property]</code> |
+
+<a name="NumberController+max"></a>
+
+### numberController.max(maxValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a maximum value for <code>object[property]</code>.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| maxValue | <code>Number</code> | The maximum value for <code>object[property]</code> |
+
+<a name="NumberController+step"></a>
+
+### numberController.step(stepValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a step value that dat.controllers.NumberController
+increments by.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Default**: <code>if minimum and maximum specified increment is 1% of the
+difference otherwise stepValue is 1</code>  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| stepValue | <code>Number</code> | The step value for dat.controllers.NumberController |
+
+<!--- API END --->

README.md

@@ -1,7 +1,8 @@
 # dat.GUI
 A lightweight graphical user interface for changing variables in JavaScript. 
 
-Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.
+Get started with dat.GUI by reading the [tutorial](http://workshop.chromeexperiments.com/examples/gui)
+or the [API documentation](API.md).
 
 
 

package.json

@@ -34,6 +34,7 @@
     "build": "npm run build-js && npm run build-css",
     "build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
     "build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css",
+    "build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API",
     "postversion": "git push && git push --tags && npm publish"
   },
   "repository": {
@@ -58,7 +59,9 @@
     "eslint-plugin-import": "^1.15.0",
     "extend": "^3.0.0",
     "html-loader": "^0.4.4",
+    "jsdoc-to-markdown": "^3.0.2",
     "node-sass": "^3.10.0",
+    "replace-between": "0.0.8",
     "sass-loader": "^4.0.2",
     "webpack": "1.14.x"
   },

src/dat/controllers/BooleanController.js

@@ -16,12 +16,11 @@ import dom from '../dom/dom';
 
 /**
  * @class Provides a checkbox input to alter the boolean property of an object.
+ *
  * @extends dat.controllers.Controller
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class BooleanController extends Controller {
   constructor(object, property) {

src/dat/controllers/ColorController.js

@@ -17,6 +17,11 @@ import Color from '../color/Color';
 import interpret from '../color/interpret';
 import common from '../utils/common';
 
+/**
+ * @class Represents a given property of an object that is a color.
+ * @param {Object} object
+ * @param {string} property
+ */
 class ColorController extends Controller {
   constructor(object, property) {
     super(object, property);

src/dat/controllers/Controller.js

@@ -16,8 +16,6 @@
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class Controller {
   constructor(object, property) {

src/dat/controllers/FunctionController.js

@@ -21,8 +21,6 @@ import dom from '../dom/dom';
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class FunctionController extends Controller {
   constructor(object, property, text) {

src/dat/controllers/NumberController.js

@@ -34,8 +34,6 @@ function numDecimals(x) {
  * @param {Number} [params.min] Minimum allowed value
  * @param {Number} [params.max] Maximum allowed value
  * @param {Number} [params.step] Increment by which to change value
- *
- * @member dat.controllers
  */
 class NumberController extends Controller {
   constructor(object, property, params) {
@@ -84,8 +82,8 @@ class NumberController extends Controller {
    * <code>object[property]</code>
    * @returns {dat.controllers.NumberController} this
    */
-  min(v) {
+  min(minValue) {
-    this.__min = v;
+    this.__min = minValue;
     return this;
   }
 
@@ -96,8 +94,8 @@ class NumberController extends Controller {
    * <code>object[property]</code>
    * @returns {dat.controllers.NumberController} this
    */
-  max(v) {
+  max(maxValue) {
-    this.__max = v;
+    this.__max = maxValue;
     return this;
   }
 
@@ -111,10 +109,10 @@ class NumberController extends Controller {
    * difference otherwise stepValue is 1
    * @returns {dat.controllers.NumberController} this
    */
-  step(v) {
+  step(stepValue) {
-    this.__step = v;
+    this.__step = stepValue;
-    this.__impliedStep = v;
+    this.__impliedStep = stepValue;
-    this.__precision = numDecimals(v);
+    this.__precision = numDecimals(stepValue);
     return this;
   }
 }

src/dat/controllers/NumberControllerBox.js

@@ -33,8 +33,6 @@ function roundToDecimal(value, decimals) {
  * @param {Number} [params.min] Minimum allowed value
  * @param {Number} [params.max] Maximum allowed value
  * @param {Number} [params.step] Increment by which to change value
- *
- * @member dat.controllers
  */
 class NumberControllerBox extends NumberController {
   constructor(object, property, params) {

src/dat/controllers/NumberControllerSlider.js

@@ -33,8 +33,6 @@ function map(v, i1, i2, o1, o2) {
  * @param {Number} minValue Minimum allowed value
  * @param {Number} maxValue Maximum allowed value
  * @param {Number} stepValue Increment by which to change value
- *
- * @member dat.controllers
  */
 class NumberControllerSlider extends NumberController {
   constructor(object, property, min, max, step) {

src/dat/controllers/OptionController.js

@@ -25,8 +25,6 @@ import common from '../utils/common';
  * @param {string} property The name of the property to be manipulated
  * @param {Object|string[]} options A map of labels to acceptable values, or
  * a list of acceptable string values.
- *
- * @member dat.controllers
  */
 class OptionController extends Controller {
   constructor(object, property, opts) {

src/dat/controllers/StringController.js

@@ -21,8 +21,6 @@ import dom from '../dom/dom';
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class StringController extends Controller {
   constructor(object, property) {

src/dat/gui/GUI.js

@@ -29,12 +29,12 @@ import styleSheet from './style.scss'; // CSS to embed in build
 
 css.inject(styleSheet);
 
-/** Outer-most className for GUI's */
+/** @ignore Outer-most className for GUI's */
 const CSS_NAMESPACE = 'dg';
 
 const HIDE_KEY_CODE = 72;
 
-/** The only value shared between the JS and SCSS. Use caution. */
+/** @ignore The only value shared between the JS and SCSS. Use caution. */
 const CLOSE_BUTTON_HEIGHT = 20;
 
 const DEFAULT_DEFAULT_PRESET_NAME = 'Default';
@@ -49,24 +49,32 @@ const SUPPORTS_LOCAL_STORAGE = (function() {
 
 let SAVE_DIALOGUE;
 
-/** Have we yet to create an autoPlace GUI? */
+/** @ignore Have we yet to create an autoPlace GUI? */
 let autoPlaceVirgin = true;
 
-/** Fixed position div that auto place GUI's go inside */
+/** @ignore Fixed position div that auto place GUI's go inside */
 let autoPlaceContainer;
 
-/** Are we hiding the GUI's ? */
+/** @ignore Are we hiding the GUI's ? */
 let hide = false;
 
-/** GUI's which should be hidden */
+/** @private GUI's which should be hidden */
 const hideableGuis = [];
 
 /**
- * A lightweight controller library for JavaScript. It allows you to easily
+ * @class A lightweight controller library for JavaScript. It allows you to easily
  * manipulate variables and fire functions on the fly.
- * @class
  *
- * @member dat.gui
+ * @typicalname gui
+ *
+ * @example
+ * // Creating a GUI with options.
+ * var gui = new dat.GUI({name: 'My GUI'});
+ *
+ * @example
+ * // Creating a GUI and a subfolder.
+ * var gui = new dat.GUI();
+ * var folder1 = gui.addFolder('Flow Field');
  *
  * @param {Object} [params]
  * @param {String} [params.name] The name of this GUI.
@@ -84,7 +92,7 @@ const GUI = function(pars) {
 
   /**
    * Outermost DOM Element
-   * @type DOMElement
+   * @type {DOMElement}
    */
   this.domElement = document.createElement('div');
   this.__ul = document.createElement('ul');
@@ -170,7 +178,7 @@ const GUI = function(pars) {
   let saveToLocalStorage;
 
   Object.defineProperties(this,
-    /** @lends dat.gui.GUI.prototype */
+    /** @lends GUI.prototype */
     {
       /**
        * The parent <code>GUI</code>
@@ -478,14 +486,31 @@ dom.bind(window, 'keydown', GUI._keydownHandler, false);
 common.extend(
   GUI.prototype,
 
-  /** @lends dat.gui.GUI */
+  /** @lends GUI.prototype */
   {
 
     /**
-     * @param object
+     * Adds a new {@link Controller} to the GUI. The type of controller created
-     * @param property
+     * is inferred from the initial value of <code>object[property]</code>. For
-     * @returns {dat.controllers.Controller} The new controller that was added.
+     * color properties, see {@link addColor}.
+     *
+     * @param {Object} object The object to be manipulated
+     * @param {String} property The name of the property to be manipulated
+     * @param {Number} [min] Minimum allowed value
+     * @param {Number} [max] Maximum allowed value
+     * @param {Number} [step] Increment by which to change value
+     * @returns {Controller} The controller that was added to the GUI.
      * @instance
+     *
+     * @example
+     * // Add a string controller.
+     * var person = {name: 'Sam'};
+     * gui.add(person, 'name');
+     *
+     * @example
+     * // Add a number controller slider.
+     * var person = {age: 45};
+     * gui.add(person, 'age', 0, 100);
      */
     add: function(object, property) {
       return add(
@@ -499,10 +524,24 @@ common.extend(
     },
 
     /**
+     * Adds a new color controller to the GUI.
+     *
      * @param object
      * @param property
-     * @returns {dat.controllers.ColorController} The new controller that was added.
+     * @returns {Controller} The controller that was added to the GUI.
      * @instance
+     *
+     * @example
+     * var palette = {
+     *   color1: '#FF0000', // CSS string
+     *   color2: [ 0, 128, 255 ], // RGB array
+     *   color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
+     *   color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
+     * };
+     * gui.addColor(palette, 'color1');
+     * gui.addColor(palette, 'color2');
+     * gui.addColor(palette, 'color3');
+     * gui.addColor(palette, 'color4');
      */
     addColor: function(object, property) {
       return add(
@@ -516,7 +555,8 @@ common.extend(
     },
 
     /**
-     * @param controller
+     * Removes the given controller from the GUI.
+     * @param {Controller} controller
      * @instance
      */
     remove: function(controller) {
@@ -529,6 +569,10 @@ common.extend(
       });
     },
 
+    /**
+     * Removes the GUI from the document and unbinds all event listeners.
+     * @instance
+     */
     destroy: function() {
       if (this.autoPlace) {
         autoPlaceContainer.removeChild(this.domElement);
@@ -543,6 +587,7 @@ common.extend(
     },
 
     /**
+     * Creates a new subfolder GUI instance.
      * @param name
      * @returns {dat.gui.GUI} The new folder.
      * @throws {Error} if this GUI already has a folder by the specified
@@ -583,10 +628,16 @@ common.extend(
       return gui;
     },
 
+    /**
+     * Opens the GUI.
+     */
     open: function() {
       this.closed = false;
     },
 
+    /**
+     * Closes the GUI.
+     */
     close: function() {
       this.closed = true;
     },
@@ -632,9 +683,10 @@ common.extend(
      * the GUI grows. When remembering new objects, append them to the end
      * of the list.
      *
-     * @param {Object...} objects
+     * @param {...Object} objects
      * @throws {Error} if not called on a top level GUI.
      * @instance
+     * @ignore
      */
     remember: function() {
       if (common.isUndefined(SAVE_DIALOGUE)) {
@@ -775,6 +827,8 @@ common.extend(
  * @param gui
  * @param [newDom] If specified, inserts the dom content in the new row
  * @param [liBefore] If specified, places the new row before another row
+ *
+ * @ignore
  */
 function addRow(gui, newDom, liBefore) {
   const li = document.createElement('li');