Add JSON tree view in addition to source preview

app/styles/app.scss

@@ -24,3 +24,5 @@ body {
 @import "components/directory-listing";
 @import "components/file-preview";
 @import "components/item-icon";
+
+@import "vendor/json-tree-view";

app/styles/vendor/_json-tree-view.scss

@@ -0,0 +1,149 @@
+.jsonView{
+    margin-left: 20px;
+    font-family: Consolas, "Lucida Console", Menlo, "dejavu sans mono", monospace;
+    font-size: 16px;
+    line-height: 16px;
+    padding: 2px;
+    cursor: default;
+    color: rgb(66, 66, 66);
+    white-space: nowrap;
+    -webkit-user-select: none;
+}
+
+.jsonView>div{
+    display: inline-block;
+}
+
+.jsonView.hidden{
+    display: none;
+}
+
+.jsonView>.children, .jsonView.insert{
+    display: block;
+}
+
+.jsonView>.name{
+    color: rgb(136, 19, 145);
+}
+
+.jsonView>.separator:before{
+    content: ":";
+}
+
+.jsonView>.separator{
+    padding-right: 5px;
+}
+
+.jsonView>.spacing{
+    display:inline-block;
+    width:15px;
+}
+.jsonView>.spacing::before{
+    content: '1';
+    visibility:hidden;
+}
+
+.jsonView>.value.null, .jsonView>.value.undefined{
+    color: rgb(128, 128, 128);
+}
+
+.jsonView>.value.boolean, .jsonView>.value.number{
+    color: rgb(28, 0, 207);
+}
+
+.jsonView>.value.string:not(.edit):before, .jsonView>.value.string:not(.edit):after{
+    content: "\"";
+}
+
+.jsonView>.value.string {
+    color: rgb(196, 26, 22);
+}
+
+.jsonView>.name:hover, .jsonView>.value:hover{
+    background-color: rgba(56, 121, 217, 0.1);
+}
+
+.jsonView>.expand, .jsonView>.collapse{
+    min-width: 20px;
+    margin-left: -20px;
+    cursor: pointer;
+}
+
+.jsonView>.expand:before{
+    content: '\25B6';
+}
+
+.jsonView>.collapse:before{
+    content: '\25BC';
+}
+
+.jsonView>.edit{
+    padding: 0px 5px 0px 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+}
+
+.jsonView>.edit br{
+    display: none;
+}
+
+.jsonView>.edit *{
+    display: inline;
+    white-space: nowrap;
+}
+
+.jsonView>.value.edit{
+    color: rgb(0, 0, 0);
+}
+
+.jsonView>.delete:before{
+    content: '+';
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    display: inline-block;
+}
+
+.jsonView>.delete{
+    opacity: 0;
+    display: inline;
+    padding: 3px;
+    cursor: pointer;
+    color: rgb(150, 150, 150);
+}
+
+.jsonView>.item:hover~.delete{
+    opacity: 1;
+    color: rgb(150, 150, 150);
+}
+.jsonView>.delete:hover{
+    opacity: 1;
+    color: rgb(0, 0, 0);
+    background: rgb(220, 220, 220);
+}
+
+.jsonView.readonly>.insert,.jsonView.readonly>.delete{
+    display: none !important;
+}
+.jsonView>.insert:before{
+    content: '+';
+}
+
+.jsonView>.insert{
+    display: none;
+    color: rgb(150, 150, 150);
+    cursor: pointer;
+}
+
+.jsonView.expanded>.insert, .jsonView.expanded>.insert{
+    display: inline-block;
+    margin-left: 20px;
+    padding: 3px;
+}
+
+.jsonView>.insert:hover{
+    color: rgb(0, 0, 0);
+    background: rgb(220, 220, 220);
+}