diff --git a/css/all.css b/css/all.css
index f986e1ecd..71ab26dac 100644
--- a/css/all.css
+++ b/css/all.css
@@ -547,6 +547,46 @@ footer {
   font-family:'Consolas', 'Courier New', 'Courier', 'Monaco', monospace;
 }
 
+#msgpack-to-json {
+  background-color:#ffffff;
+  box-shadow:0 0 4px rgba(0, 0, 0, 0.7);
+  display:none;
+  padding:20px 30px;
+  width:780px;
+}
+
+#msgpack-to-json h3 {
+  font-size:130%;
+  margin-bottom: 0.8em;
+}
+#msgpack-to-json .bytes {
+  font-weight:400;
+  font-size:96%;
+  font-family:'Consolas', 'Courier New', 'Courier', 'Monaco', monospace;
+  color:#222;
+  margin-left:0.4em;
+}
+
+#msgpack-to-json #decode-msgpack-text {
+  font-size:140%;
+  width:770px;
+  height:5em;
+  border:1px solid #999;
+}
+
+#msgpack-to-json #decoded-json-text {
+  font-size:140%;
+  /*
+  min-height:5em;
+  max-height:20.5em;
+  */
+  height:12.5em;
+  width:770px;
+  border:none;
+  overflow:scroll;
+  font-family:'Titillium Web', 'Myriad Web Pro', 'Helvetica', sans-serif;
+}
+
 .lean_close {
   position: absolute;
   top: 12px;
diff --git a/index.html.erb b/index.html.erb
index 17ba875f6..908edf080 100644
--- a/index.html.erb
+++ b/index.html.erb
@@ -64,6 +64,24 @@
       $("#msgpack-bytes").text(msg.length.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + " bytes");
       $("#msgpack-percent").text(Math.round(msg.length / textLength * 100).toString() + " %");
     }).keyup();
+
+    $("#decode-msgpack-text").keyup(function(event) {
+      var hex = $("#decode-msgpack-text").val().split(' ');
+      var msg = jQuery.map(hex, function(e,i) {
+        return parseInt(e, 16)
+      });
+      var text;
+      try {
+         text = JSON.stringify(msgpack.unpack(msg));
+      } catch (e) {
+         return;
+      }
+      $("#decoded-json-text").text(text);
+      var textLength = encodeURIComponent(text).replace(/%../g,"%").length;
+      $("#decode-json-bytes").text(textLength.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + " bytes");
+      $("#decode-msgpack-bytes").text(msg.length.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + " bytes");
+      $("#decode-json-percent").text(Math.round(textLength / msg.length * 100).toString() + " %");
+    }).keyup();
   });
   </script>
 
@@ -187,6 +205,15 @@
       <h3>MessagePack (hex) <span class="bytes" id="msgpack-bytes"></span> <span class="bytes" id="msgpack-percent"></span></h3>
       <textarea readonly id="msgpack-text"></textarea>
     </div>
+
+    <div id="msgpack-to-json">
+      <h3>MessagePack (hex, space sparated) <span class="bytes" id="decode-msgpack-bytes"></span></h3>
+      <form>
+        <textarea type="text" id="decode-msgpack-text">82 a7 63 6f 6d 70 61 63 74 c3 a6 73 63 68 65 6d 61 00</textarea>
+      </form>
+      <h3>JSON <span class="bytes" id="decode-json-bytes"></span> <span class="bytes" id="decode-json-percent"></span></h3>
+      <textarea readonly id="decoded-json-text"></textarea>
+    </div>
   </main>
 
   <footer>