diff --git a/public/css/style.css b/public/css/style.css
index 0dc97eb0..58447395 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1806,7 +1806,10 @@ pre[class*=" language-"] {
     .summary-social-graph--label-container:hover .bar-graph--tooltip:hover {
       visibility: hidden;
       opacity: 0; }
-
+  .summary-view-code-button {
+    float: right; }
+  .summary-json {
+    display: none; }
 .sentences {
   min-width: 732px; }
   .sentences--filters {
diff --git a/public/images/icons/code.svg b/public/images/icons/code.svg
new file mode 100644
index 00000000..dcf811ac
--- /dev/null
+++ b/public/images/icons/code.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<g>
+	<polygon points="8.586,8.586 1.171,16 8.586,23.414 11.414,20.586 6.829,16 11.414,11.414 	" fill="#a53725"/>
+	<polygon points="23.414,8.586 20.586,11.414 25.171,16 20.586,20.586 23.414,23.414 30.829,16 	" fill="#a53725"/>
+</g>
+</svg>
diff --git a/public/js/demo.js b/public/js/demo.js
index 0ca4b9e8..80eee45d 100755
--- a/public/js/demo.js
+++ b/public/js/demo.js
@@ -63,6 +63,9 @@ function allReady(thresholds, sampleText) {
       $emotionGraph = $('.summary-emotion-graph'),
       $writingGraph = $('.summary-writing-graph'),
       $socialGraph = $('.summary-social-graph'),
+      $summaryJsonButton = $('.js-toggle-summary-json'),
+      $summaryJson = $('.js-summary-json'),
+      $summaryJsonCode = $('.js-summary-json .json--code'),
       $emotionFilters = $('.filters--emotion'),
       $writingFilters = $('.filters--writing'),
       $socialFilters = $('.filters--social'),
@@ -71,7 +74,7 @@ function allReady(thresholds, sampleText) {
       $originalTextTooltipContainer = $('.original-text--tooltip-container'),
       $legend = $('.original-text--legend'),
       $sentenceRankTable = $('.sentence-rank--table'),
-      $jsonCode = $('.json--code'),
+      $sentenceJson = $('.json .json--code'),
       $outputResetButton = $('.output--reset-button'),
       barGraph_template = barGraphTemplate.innerHTML,
       verticalBarGraph_template = verticalBarGraphTemplate.innerHTML,
@@ -274,13 +277,31 @@ function allReady(thresholds, sampleText) {
       });
     }
 
+    /**
+     * Emit view update for json view sentence tones
+     * @param {Object} data
+     */
+    function updateJSONSentenceTones(data) {
+      $sentenceJson.empty();
+      $sentenceJson.html(JSON.stringify({'sentences_tone' : data['sentences_tone']}, null, 2));
+    }
+
+    /**
+     * Emit view update for json view sentence tones
+     * @param {Object} data
+     */
+    function updateJSONDocumentTones(data) {
+      $summaryJsonCode.empty();
+      $summaryJsonCode.html(JSON.stringify({'document_tone' : data['document_tone']}, null, 2));
+    }
+
     /**
      * Emit view update for json view
      * @param {Object} data
      */
     function updateJSON(data) {
-      $jsonCode.empty();
-      $jsonCode.html(JSON.stringify(data, null, 2));
+      updateJSONSentenceTones(data);
+      updateJSONDocumentTones(data);
     }
 
     app.selectFilterBySample();
@@ -323,7 +344,7 @@ function allReady(thresholds, sampleText) {
     updateLegend();
     bindOriginalTextHoverEvents();
 
-    $jsonCode.html(JSON.stringify(data, null, 2));
+    updateJSON(data);
 
     $('.filters--radio').on('click', function() {
       clickFilter($(this).data('id'));
@@ -411,6 +432,10 @@ function allReady(thresholds, sampleText) {
   });
 
   updateTextarea($('.input--radio:checked').val());
+
+  $summaryJsonButton.click(function() {
+    $summaryJson.toggle();
+  });
 }
 
 $(document).ready(ready);
diff --git a/views/index.ejs b/views/index.ejs
index 0ab2e356..f10bbab8 100755
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -131,6 +131,19 @@
             <div class="summary-social-graph bar-graph"></div>
           </div>
         </div>
+        <div class="summary-row">
+          <span class="icon-hyperlink summary-view-code-button">
+  					<img class="icon icon-code" src="images/icons/code.svg" />
+  					<button class="base--a icon-hyperlink--button_BLANK js-toggle-summary-json" href="">
+  						View JSON
+  			    </button>
+  			  </span>
+        </div>
+        <div class="summary-json js-summary-json">
+          <pre class="base--pre json--pre language-javascript">
+            <code class="base--code json--code language-javascript"></code>
+          </pre>
+        </div>
         <h3 class="base--h2 output--sentence-title">Sentence-level tone</h3>
         <p class="base--p output--sentence-description">Identify sentences with stronger tones in context or sorted by score. Highlighted sentences indicate the likelihood of a tone present. If more than one tone is present, the stronger one is shown. Click on a sentence to see a breakdown of all tones.</p>
         <div class="output--reset icon-hyperlink">