diff --git a/demo/demo.js b/demo/demo.js
index b2bc257a..2655a4c1 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -139,7 +139,7 @@ exports.launch = function(env) {
     docs.svg = new EditSession(document.getElementById("svgtext").innerHTML.replace("&lt;", "<"));
     docs.svg.setMode(new SvgMode());
     docs.svg.setUndoManager(new UndoManager());
-    
+
     docs.textile = new EditSession(document.getElementById("textiletext").innerHTML);
     docs.textile.setMode(new TextileMode());
     docs.textile.setUndoManager(new UndoManager());
@@ -301,6 +301,10 @@ exports.launch = function(env) {
         env.editor.renderer.setHScrollBarAlwaysVisible(checked);
     });
 
+    bindCheckbox("soft_tab", function(checked) {
+        env.editor.getSession().setUseSoftTabs(checked);
+    });
+
     function bindCheckbox(id, callback) {
         var el = document.getElementById(id);
         var onCheck = function() {
@@ -383,11 +387,11 @@ exports.launch = function(env) {
     });
 
     window.env = env;
-    
+
     /**
      * This demonstrates how you can define commands and bind shortcuts to them.
      */
-    
+
     // Command to focus the command line from the editor.
     canon.addCommand({
         name: "focuscli",
@@ -400,7 +404,7 @@ exports.launch = function(env) {
             env.cli.cliView.element.focus();
         }
     });
-    
+
     // Command to focus the editor line from the command line.
     canon.addCommand({
         name: "focuseditor",
@@ -413,7 +417,7 @@ exports.launch = function(env) {
             env.editor.focus();
         }
     });
-    
+
     // Fake-Save, works from the editor and the command line.
     canon.addCommand({
         name: "save",
@@ -426,7 +430,7 @@ exports.launch = function(env) {
             alert("Fake Save File");
         }
     });
-    
+
     // Fake-Print with custom lookup-sender-match function.
     canon.addCommand({
         name: "save",
@@ -435,9 +439,9 @@ exports.launch = function(env) {
             mac: "Command-P",
             sender: function(env, sender, hashId, keyString) {
                 if (sender == "editor") {
-                    return true;   
+                    return true;
                 } else {
-                    alert("Sorry, can only print from the editor");                    
+                    alert("Sorry, can only print from the editor");
                 }
             }
         },
diff --git a/index.html b/index.html
index 60703dd5..4cdac4cd 100644
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
       </td>
       <td align="right">
         <label for="show_hidden">Show Invisibles</label>
-        <input type="checkbox" name="show_hidden" id="show_hidden">
+        <input type="checkbox" name="show_hidden" id="show_hidden" checked>
       </td>
       <td align="right">
         <label for="show_hscroll">Persistent HScroll</label>
@@ -128,6 +128,10 @@
         <label for="show_print_margin">Show Print Margin</label>
         <input type="checkbox" id="show_print_margin" checked>
       </td>
+      <td align="right">
+        <label for="soft_tab">Use Soft Tab:</label>
+        <input type="checkbox" id="soft_tab" checked>
+      </td>
       <td align="right">
         <label for="highlight_selected_word">Highlight selected word</label>
         <input type="checkbox" id="highlight_selected_word" checked>
@@ -144,7 +148,7 @@
     <script type="text/editor" id="jstext">function foo(items) {
     for (var i=0; i<items.length; i++) {
         alert(items[i] + "juhu");
-    }
+    }	// Real Tab.
 }
 // A magic character: >> ぁ <<
 </script>
@@ -329,8 +333,8 @@ print "\n";
 
 </script>
 
-<script type="text/editor" id="svgtext"><svg 
-  width="800" height="600" 
+<script type="text/editor" id="svgtext"><svg
+  width="800" height="600"
   xmlns="http://www.w3.org/2000/svg"
   onload="StartAnimation(evt)">
 
@@ -380,14 +384,14 @@ print "\n";
     window.ShowAndGrowElement = ShowAndGrowElement
   ]]>&lt;/script>
 
-  <rect 
-    fill="#2e3436" 
-    fill-rule="nonzero" 
-    stroke-width="3" 
-    y="0" 
-    x="0" 
-    height="600" 
-    width="800" 
+  <rect
+    fill="#2e3436"
+    fill-rule="nonzero"
+    stroke-width="3"
+    y="0"
+    x="0"
+    height="600"
+    width="800"
     id="rect3590"/>
 
     <text