diff --git a/index.html b/index.html
index 0b5001f..bcab9ed 100644
--- a/index.html
+++ b/index.html
@@ -13,13 +13,16 @@
 }
 
 .dialog {
+  position: absolute;
+  top: 0px;
+  left: 70px;
+  width: 400px;
+  height: 300px;
   transition: height 0.3s;
-  border-radius: 5px;
-  margin: 10px;
-  border: 1px solid #444;
-  background: #D0E0FF;
-
+  margin-top: 3px;
+  background: #F8F8F8;
   display: none;
+  border: 1px solid #444;
 }
 
 .visible {
@@ -43,6 +46,13 @@ button.active {
   background: #D0E0FF;
 }
 
+#export-button {
+  background: #D8D8D8;
+}
+#export-button.active {
+  background: #C8C8C8;
+}
+
 #ascii-canvas {
   position: fixed;
   left: 0px;
@@ -68,6 +78,16 @@ button.active {
   margin: 0px;
 }
 
+#export-area {
+  width: 380px;
+  height: 280px;
+  overflow: hidden;
+  resize: none;
+  margin: 5px;
+  font-family: monospace;
+  white-space: pre;
+}
+
 </style>
 </head>
 <body>
@@ -81,17 +101,18 @@ button.active {
 </pre></div>
 <div id="menu">
   <div id="buttons">
-    <button id="box-button" class="active">Box</button>
-    <button id="line-button">Line</button>
-    <button id="freeform-button">Draw</button>
-    <button id="erase-button">Erase</button>
-    <button id="move-button">Resize</button>
-    <button id="text-button">Text</button>
+    <button id="export-button" class="tool">Export</button>
+    <button id="box-button" class="tool active">Box</button>
+    <button id="line-button" class="tool">Line</button>
+    <button id="freeform-button" class="tool">Draw</button>
+    <button id="erase-button" class="tool">Erase</button>
+    <button id="move-button" class="tool">Resize</button>
+    <button id="text-button" class="tool">Text</button>
+    <button id="undo-button">Undo</button>
     <!-- <button id="select-button">Select</button> -->
-    <!-- <button id="menu-button">Menu</button> -->
   </div>
-  <div id="menu-button-dialog" class="dialog">
-    <pre id="export-area">BLAH</pre>
+  <div id="export-button-dialog" class="dialog">
+    <textarea id="export-area"></textarea>
   </div>
 </div>
 <canvas id="ascii-canvas"></canvas>
diff --git a/js-lib/controller.js b/js-lib/controller.js
index df14593..8d41d22 100644
--- a/js-lib/controller.js
+++ b/js-lib/controller.js
@@ -150,10 +150,15 @@ ascii.Controller.prototype.installBindings = function() {
   });
   // TODO: Handle pinch to zoom.
 
-  $('#buttons > button').click(function(e) {
+  $('#buttons > button.tool').click(function(e) {
     this.updateButtons(e.target.id);
   }.bind(this));
 
+  $('#undo-button').click(function(e) {
+    this.state.undo();
+    this.view.dirty = true;
+  }.bind(this));
+
   $(window).keypress(function(e) {
     this.handleKeyPress(e);
   }.bind(this));
@@ -168,7 +173,7 @@ ascii.Controller.prototype.installBindings = function() {
  * @param {string} id The ID of the element clicked.
  */
 ascii.Controller.prototype.updateButtons = function(id) {
-  $('#buttons > button').removeClass('active');
+  $('#buttons > button.tool').removeClass('active');
   $('.dialog').removeClass('visible');
 
   $('#' + id).addClass('active');
@@ -193,6 +198,9 @@ ascii.Controller.prototype.updateButtons = function(id) {
   if (id == 'text-button') {
     this.drawFunction = new ascii.DrawText(this.state);
   }
+  if (id == 'export-button') {
+    $('#export-area').val(this.state.outputText());
+  }
 };
 
 /**
@@ -230,8 +238,8 @@ ascii.Controller.prototype.handleKeyDown = function(event) {
   if (event.keyCode == 39) { specialKeyCode = KEY_RIGHT; }
 
   if (specialKeyCode != null) {
-    event.preventDefault();
-    event.stopPropagation();
+    //event.preventDefault();
+    //event.stopPropagation();
     this.drawFunction.handleKey(specialKeyCode);
     this.view.dirty = true;
   }
diff --git a/js-lib/state.js b/js-lib/state.js
index cdfce44..eb53d2b 100644
--- a/js-lib/state.js
+++ b/js-lib/state.js
@@ -147,9 +147,12 @@ ascii.State.prototype.commitDraw = function(opt_skipSave) {
   }
 };
 
-
+/**
+ * Undoes the last committed state.
+ */
 ascii.State.prototype.undo = function() {
   if (this.undoStates.length == 0) { return; }
+
   var lastState = this.undoStates.pop();
   for (var i in lastState) {
     var mappedValue = lastState[i];
@@ -157,3 +160,37 @@ ascii.State.prototype.undo = function() {
   }
   this.commitDraw(true);
 };
+
+/**
+ * Outputs the entire contents of the diagram as text.
+ * @return {string}
+ */
+ascii.State.prototype.outputText = function() {
+  // Find the first/last cells in the diagram so we don't output everything.
+  var start = new ascii.Vector(Number.MAX_VALUE, Number.MAX_VALUE);
+  var end = new ascii.Vector(-1, -1);
+
+  for (var i = 0; i < this.cells.length; i++)  {
+    for (var j = 0; j < this.cells[i].length; j++) {
+      if (this.cells[i][j].getRawValue() != null) {
+        if (i < start.x) { start.x = i; }
+        if (j < start.y) { start.y = j; }
+        if (i > end.x) { end.x = i; }
+        if (j > end.y) { end.y = j; }
+      }
+    }
+  }
+  if (end.x < 0) { return '' };
+
+  var output = '';
+  for (var j = start.y; j <= end.y; j++) {
+    var line = '';
+    for (var i = start.x; i <= end.x; i++) {
+      var val = this.getDrawValue(new ascii.Vector(i, j));
+      line += (val == null ? ' ' : val);
+    }
+    // Trim end whitespace.
+    output += line.replace('\\s+$/g', '') + '\n';
+  }
+  return output;
+};
