diff --git a/example.html b/example.html
index 2c3d7c3f..f1a2f770 100644
--- a/example.html
+++ b/example.html
@@ -1,63 +1,112 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
+
 <body>
-  <script type="text/javascript" src="build/dat.gui.js"></script>
-  <script type="text/javascript">
-    var obj = {
-        message: 'Hello World',
-        displayOutline: false,
+    <script type="text/javascript" src="build/dat.gui.js"></script>
+    <script type="text/javascript">
+        var obj = {
+            message: 'Hello World',
+            displayOutline: false,
+
+            maxSize: 6.0,
+            speed: 5,
+
+            height: 10,
+            noiseStrength: 10.2,
+            growthSpeed: 0.2,
 
-        maxSize: 6.0,
-        speed: 5,
+            type: 'three',
 
-        height: 10,
-        noiseStrength: 10.2,
-        growthSpeed: 0.2,
+            explode: function() {
+                alert('Bang!');
+            },
 
-        type: 'three',
+            color0: "#ffae23", // CSS string
+            color1: [0, 128, 255], // RGB array
+            color2: [0, 128, 255, 0.3], // RGB with alpha
+            color3: {
+                h: 350,
+                s: 0.9,
+                v: 0.3
+            } // Hue, saturation, value
+        };
 
-        explode: function () {
-          alert('Bang!');
-        },
+        var gui = new dat.gui.GUI();
 
-        color0: "#ffae23", // CSS string
-        color1: [ 0, 128, 255 ], // RGB array
-        color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
-        color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
-    };
+        gui.remember(obj);
 
-    var gui = new dat.gui.GUI();
+        gui.add(obj, 'message');
+        gui.add(obj, 'displayOutline');
+        gui.add(obj, 'explode');
 
-    gui.remember(obj);
+        gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
+        gui.add(obj, 'height').step(5); // Increment amount
 
-    gui.add(obj, 'message');
-    gui.add(obj, 'displayOutline');
-    gui.add(obj, 'explode');
+        // Choose from accepted values
+        gui.add(obj, 'type', ['one', 'two', 'three']);
 
-    gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
-    gui.add(obj, 'height').step(5); // Increment amount
+        // Choose from named values
+        gui.add(obj, 'speed', {
+            Stopped: 0,
+            Slow: 0.1,
+            Fast: 5
+        });
 
-    // Choose from accepted values
-    gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
+        var f1 = gui.addFolder('Colors');
+        f1.addColor(obj, 'color0');
+        f1.addColor(obj, 'color1');
+        f1.addColor(obj, 'color2');
+        f1.addColor(obj, 'color3');
 
-    // Choose from named values
-    gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
+        var f2 = gui.addFolder('Another Folder');
+        f2.add(obj, 'noiseStrength');
 
-    var f1 = gui.addFolder('Colors');
-    f1.addColor(obj, 'color0');
-    f1.addColor(obj, 'color1');
-    f1.addColor(obj, 'color2');
-    f1.addColor(obj, 'color3');
+        var f3 = f2.addFolder('Nested Folder');
+        f3.add(obj, 'growthSpeed');
 
-    var f2 = gui.addFolder('Another Folder');
-    f2.add(obj, 'noiseStrength');
+        //  alternative StringController add
+        gui.add(new dat.controllers.StringController(obj, 'message'));
 
-    var f3 = f2.addFolder('Nested Folder');
-    f3.add(obj, 'growthSpeed');
+        //  a custom controller
+        class KnobController extends dat.controllers.Controller {
+            constructor(object, property, a, b) {
+                super(object, property);
+                const _this = this;
+                this.__input = document.createElement('input');
+                this.__input.setAttribute('type', 'number');
+                this.__input.style.width = '40%';
+                this.updateDisplay();
+                this.domElement.appendChild(this.__input);
+                var button = document.createElement('input');
+                button.setAttribute('type', 'button');
+                button.value = 'Set ' + property;
+                button.style.width = '50%';
+                button.onclick = function(e) {
+                    object[property] = a + b;
+                    _this.updateDisplay();
+                };
+                this.domElement.appendChild(button);
+            }
+            updateDisplay() {
+                this.__input.value = this.getValue();
+            }
+        }
 
-  </script>
+        const api = {
+
+            color: '#ffffff',
+            value: 0.5,
+
+        };
+
+        gui.add(new KnobController(api, 'value', 0.5, 25), {
+            liClass: 'knobby'
+        });
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js
index 972c3073..c88139db 100644
--- a/src/dat/gui/GUI.js
+++ b/src/dat/gui/GUI.js
@@ -1131,23 +1131,30 @@ function recallSavedValue(gui, controller) {
 }
 
 function add(gui, object, property, params) {
-  if (object[property] === undefined) {
-    throw new Error(`Object "${object}" has no property "${property}"`);
-  }
-
   let controller;
+  
+  if (object instanceof Controller) {
+    controller = object;
+    params = property || { };
+  }  else {
+
+    if (object[property] === undefined) {
+      throw new Error(`Object "${object}" has no property "${property}"`);
+    }
+
+    if (params.color) {
+      controller = new ColorController(object, property);
+    } else {
+      const factoryArgs = [object, property].concat(params.factoryArgs);
+      controller = ControllerFactory.apply(gui, factoryArgs);
+    }
 
-  if (params.color) {
-    controller = new ColorController(object, property);
-  } else {
-    const factoryArgs = [object, property].concat(params.factoryArgs);
-    controller = ControllerFactory.apply(gui, factoryArgs);
   }
 
   if (params.before instanceof Controller) {
     params.before = params.before.__li;
   }
-
+  
   recallSavedValue(gui, controller);
 
   dom.addClass(controller.domElement, 'c');
@@ -1165,6 +1172,10 @@ function add(gui, object, property, params) {
   dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);
   if (controller instanceof ColorController) {
     dom.addClass(li, 'color');
+  } else if ( params.liClass ) {
+    dom.addClass(li, params.liClass);
+  } else if ( controller.liClass ) {
+    dom.addClass(li, controller.liClass);
   } else {
     dom.addClass(li, typeof controller.getValue());
   }
