jsoneditor.html

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="css/jsoneditor.css"/>
    <link rel="icon" href="img/logo-small.png"/>

    <title>Flexi JSON Editor and Inspector</title>

    <style>
        body {
          padding: 0 70px;
        }
        #json {
          margin: 10px 10px 10px 32px;
          width: 50%;
          min-height: 70px;
        }
        h1 {
          font-family: Arial;
          color: #EBBC6E;
          text-align: center;
          text-shadow: 1px 1px 1px black;
          border-bottom: 1px solid gray;
          padding-bottom: 50px;
          width: 500px;
          margin: 20px auto;
        }
        h1 img {
          float: left;
        }
        h1 b {
          color: black;
          font-weight: normal;
          display: block;
          font-size: 12px;
          text-shadow: none;
        }

        #legend {
          display: inline;
          margin-left: 30px;
        }
        #legend h2 {
           display: inline;
           font-size: 18px;
           margin-right: 20px;
        }
        #legend a {
          color: white;
          margin-right: 20px;
        }
        #legend span {
          padding: 2px 4px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          color: white;
          font-weight: bold;
          text-shadow: 1px 1px 1px black;
          background-color: black;
        }
        #legend .string  { background-color: #009408; }
        #legend .array   { background-color: #2D5B89; }
        #legend .object  { background-color: #E17000; }
        #legend .number  { background-color: #497B8D; }
        #legend .boolean { background-color: #B1C639; }
        #legend .null    { background-color: #B1C639; }

        #expander {
          cursor: pointer;
          margin-right: 20px;
        }

        #footer {
          font-size: 13px;
        }

        #rest {
          margin: 20px 0 20px 30px;
        }
        #rest label {
          font-weight: bold;
        }
        #rest-callback {
          width: 70px;
        }
        #rest-url {
          width: 700px;
        }
        label[for="json"] {
          margin-left: 30px;
          display: block;
        }
        #json-note {
          margin-left: 30px;
          font-size: 12px;
        }

        .addthis_toolbox {
          position: relative;
          top: -10px;
          margin-left: 30px;
        }

        #disqus_thread {
          margin-top: 50px;
          padding-top: 20px;
          padding-bottom: 20px;
          border-top: 1px solid gray;
          border-bottom: 1px solid gray;
        }

    </style>

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-5029684-7']);
        _gaq.push(['_trackPageview']);

        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>

<body>
    <h1>
        <img src="img/logo-small.png" alt="FlexiJSONEditor logo" />
        <span>JSON Editor and Inspector</span>
        <b>Inspect your JSON structures with ease.</b>
    </h1>
    
    <div id="legend">
        <span><a href="http://www.daviddurman.com">Blog post & Usage</a></span>
        <span id="expander">Expand all</span>
        <span class="array">array</span>
        <span class="object">object</span>
        <span class="string">string</span>
        <span class="number">number</span>
        <span class="boolean">boolean</span>
        <span class="null">null</span>
        <span>Remove item by deleting a property name.</span>
    </div>

    <div id="rest">
        <label>JSONP: </label><br/>
        Callback: <input type="text" id="rest-callback" value="_callback" />
        URL: <input type="text" value="" id="rest-url" />
        <button id="btn-rest-url">display JSON</button>
    </div>
    <pre id="path"></pre>
    <div id="editor" class="json-editor"></div>

    <label for="json">Or paste JSON directly here:</label>
    <p id="json-note">Note that you can edit your JSON directly in the textarea below.
        The JSON viewer will get updated when you leave the field.</p>
    <textarea id="json"></textarea><br/>

    <hr />
    <br/>

    <input id="btnupload" type="file" />
    <div id="result"></div>
    <div id="disp"> </div>

    <br/>
    <hr />
    <div id="legend"><span><a id="btndownload" href="">Download</a></span></div>

    <p id="footer">Copyright &copy; 2011-2013 David Durman (client IO, <a href="http://client.io">http://client.io</a>, org@client.io)</p>

    <script src="js/vendor/json2.js"></script>
    <script src="js/vendor/jquery-1.10.1.min.js"></script>
    <script src="js/vendor/jquery.jsoneditor.js"></script>
    <script src="js/vendor/jsoneditor.js"></script>

</body>
</html>