diff --git a/demo/index.html b/demo/index.html
index 0d8efac3..d4574aa3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -19,6 +19,16 @@
           <p>
             <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
           </p>
+          <p>
+            <label>
+              cursorStyle
+              <select id="option-cursor-style">
+                <option value="block">block</option>
+                <option value="underline">underline</option>
+                <option value="bar">bar</option>
+              </select>
+            </label>
+          </p>
           <p>
             <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
           </p>
diff --git a/demo/main.js b/demo/main.js
index b262ce53..c8d03ae1 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -9,6 +9,7 @@ var term,
 var terminalContainer = document.getElementById('terminal-container'),
     optionElements = {
       cursorBlink: document.querySelector('#option-cursor-blink'),
+      cursorStyle: document.querySelector('#option-cursor-style'),
       scrollback: document.querySelector('#option-scrollback'),
       tabstopwidth: document.querySelector('#option-tabstopwidth')
     },
@@ -32,6 +33,9 @@ rowsElement.addEventListener('change', setTerminalSize);
 optionElements.cursorBlink.addEventListener('change', function () {
   term.setOption('cursorBlink', optionElements.cursorBlink.checked);
 });
+optionElements.cursorStyle.addEventListener('change', function () {
+  term.setOption('cursorStyle', optionElements.cursorStyle.value);
+});
 optionElements.scrollback.addEventListener('change', function () {
   term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
 });