diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
new file mode 100644
index 0000000000..06090da423
--- /dev/null
+++ b/examples/html/gridControls.html
@@ -0,0 +1,167 @@
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script>
+        function loaded() {
+            var gridColor = { red: 0, green: 0, blue: 0 };
+            var gridColors = [
+                { red: 0, green: 0, blue: 0 },
+                { red: 255, green: 255, blue: 255 },
+                { red: 255, green: 0, blue: 0 },
+                { red: 0, green: 255, blue: 0},
+                { red: 0, green: 0, blue: 255 },
+            ];
+
+            elPosY = document.getElementById("horiz-y");
+            elMinorSpacing = document.getElementById("minor-spacing");
+            elMajorSpacing = document.getElementById("major-spacing");
+            elSnapToGrid = document.getElementById("snap-to-grid");
+            elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
+            elMoveToSelection = document.getElementById("move-to-selection");
+            elMoveToAvatar = document.getElementById("move-to-avatar");
+
+            if (window.EventBridge !== undefined) {
+                EventBridge.scriptEventReceived.connect(function(data) {
+                    data = JSON.parse(data);
+
+                    if (data.origin) {
+                        var origin = data.origin;
+                        elPosY.value = origin.y.toFixed(2);
+                    }
+
+                    if (data.minorGridSpacing !== undefined) {
+                        elMinorSpacing.value = data.minorGridSpacing;
+                    }
+
+                    if (data.majorGridEvery !== undefined) {
+                        elMajorSpacing.value = data.majorGridEvery;
+                    }
+
+                    if (data.gridColor) {
+                        gridColor = data.gridColor;
+                    }
+
+                    if (data.snapToGrid !== undefined) {
+                        elSnapToGrid.checked = data.snapToGrid == true;
+                    }
+
+                    if (data.visible !== undefined) {
+                        elHorizontalGridVisible.checked = data.visible == true;
+                    }
+                });
+
+                function emitUpdate() {
+                    EventBridge.emitWebEvent(JSON.stringify({
+                        type: "update",
+                        origin: {
+                            y: elPosY.value,
+                        },
+                        minorGridSpacing: elMinorSpacing.value,
+                        majorGridEvery: elMajorSpacing.value,
+                        gridColor: gridColor,
+                        snapToGrid: elSnapToGrid.checked,
+                        visible: elHorizontalGridVisible.checked,
+                    }));
+                }
+
+            }
+
+            elPosY.addEventListener("change", emitUpdate);
+            elMinorSpacing.addEventListener("change", emitUpdate);
+            elMajorSpacing.addEventListener("change", emitUpdate);
+            elSnapToGrid.addEventListener("change", emitUpdate);
+            elHorizontalGridVisible.addEventListener("change", emitUpdate);
+
+            elMoveToAvatar.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveToAvatar",
+                }));
+            });
+            elMoveToSelection.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveToSelection",
+                }));
+            });
+
+            var gridColorBox = document.getElementById('grid-color');
+
+            for (var i = 0; i < gridColors.length; i++) {
+                var colors = gridColors[i];
+                var box = document.createElement('div');
+                box.setAttribute('class', 'color-box');
+                box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
+                document.getElementById("grid-colors").appendChild(box);
+                box.addEventListener("click", function(color) { 
+                    return function() {
+                        gridColor = color;
+                        emitUpdate();
+                    }
+                }({ red: colors.red, green: colors.green, blue: colors.blue }));
+            }
+
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
+        }
+    </script>
+</head>
+<body onload='loaded();'>
+    <div class="section-header">
+        <label>Horizontal Grid</label>
+    </div>
+
+    <div class="grid-section">
+
+        <div class="property-section">
+            <label>Visible</label>
+            <span>
+                <input type='checkbox' id="horiz-grid-visible">
+            </span>
+        </div>
+
+        <div class="property-section">
+            <label>Snap to grid</label>
+            <span>
+                <input type='checkbox' id="snap-to-grid">
+            </span>
+        </div>
+
+        <div id="horizontal-position" class="property-section">
+            <label>Position (Y Axis)</label>
+            <span>
+                <input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
+            </span>
+        </div>
+
+        <div class="property-section">
+            <label>Minor Grid Size</label>
+            <span>
+                <input type='number' id="minor-spacing" min="0" step="0.01", ></input>
+            </span>
+        </div>
+
+        <div class="property-section">
+            <label>Major Grid Every</label>
+            <span>
+                <input type='number' id="major-spacing" min="2" step="1", ></input>
+            </span>
+        </div>
+
+        <div class="property-section">
+            <label>Grid Color</label>
+            <span id="grid-colors"></span>
+        </div>
+
+        <div class="property-section">
+            <span>
+                <input type="button" id="move-to-selection" value="Move to Selection">
+            </span>
+        </div>
+        <div class="property-section">
+            <span>
+                <input type="button" id="move-to-avatar" value="Move to Avatar">
+            </span>
+        </div>
+    </div>
+</body>
+</html>
