diff --git a/demo/startup.js b/demo/startup.js
index 1403fd1b..1b5a958f 100644
--- a/demo/startup.js
+++ b/demo/startup.js
@@ -277,6 +277,16 @@ exports.launch = function(env) {
 
         return event.preventDefault(e);
     });
+	
+	// gutter
+	editor = env.editor
+	toggleGutter=function(){
+		editor.renderer.setShowGutter(!editor.renderer.showGutter)
+	}
+	//
+	window.ace={
+		editor: editor		
+	}
 };
 
 });
diff --git a/demo/styles.css b/demo/styles.css
index ce59595c..325e6e82 100644
--- a/demo/styles.css
+++ b/demo/styles.css
@@ -53,4 +53,20 @@ body {
     -moz-border-radius-topright: 10px;
     border-top-left-radius: 4px; border-top-right-radius: 4px;
     background: #DDD; color: #000;
+}
+
+#toggleGutter{
+    height:8px;
+    width:20px;
+    background:lightblue;
+    bottom:0;
+    position:absolute;
+    z-index: 1000;
+    -moz-border-radius-topright: 20px;
+}
+
+#toggleGutter:hover{
+    -moz-box-shadow: 2px -1px 5px 3px #91B6D5;
+    border-right: 1px solid #A1A1CF;
+    border-top: 1px solid #A1A1CF;
 }
\ No newline at end of file
diff --git a/editor.html b/editor.html
index 30e67abb..9849cbcb 100644
--- a/editor.html
+++ b/editor.html
@@ -64,8 +64,10 @@
       </tr>
     </table>
 
-    <div id="editor">    
+    <div id="editor">
+		<div id="toggleGutter" onclick='toggleGutter()'></div> 
     </div>
+	
     
     <script type="text/editor" id="jstext">function foo(items) {
     for (var i=0; i<items.length; i++) {