web/jsonlint.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="JSON parser and validator - checks syntax and semantics of JSON data.">
  <title>JSON Lint</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 1ex;
    }
    #source {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    #source label {
      clear: right;
    }
    #data, #schema, #result {
      padding: 1ex;
    }
    #data, #schema, #validate {
      font-size: 100%;
      border-radius: 0.5ex;
    }
    #validate {
      padding: 1ex;
      color: white;
      background-color: darkblue;
      border: 1px solid darkblue;
    }
    #data, #schema {
      font-family: monospace;
      width: calc(100% - 2ex);
    }
    #schema-section {
      display: none;
    }
    #data-section, #schema-section {
      flex-basis: 100%;
    }
    .with-schema #data-section, .with-schema #schema-section {
      display: block;
      flex-basis: calc(50% - 1ex);
      min-width: calc(42ex - 3ex);
    }
    #environment {
      display: none;
    }
    .with-schema #environment {
      display: inline-block;
    }
    #options > * {
      display: flex;
      flex-wrap: wrap;
      margin-top: 1ex;
      margin-bottom: 1ex;
    }
    #options > * > * {
      margin-right: 3ex;
      margin-bottom: 1ex;
    }
    #options > * > span {
      display: block;
      width: 5em;
    }
    #result-section {
      display: none;
    }
    .pass {
      background-color: #efe;
      color: #393;
      border: 2px solid #393;
    }
    .fail {
      background-color: #fee;
      color: #933;
      border: 2px solid #933;
    }
  </style>
</head>

<body>
  <header>
    <h1>JSON Lint</h1>
    <p>Enter data and optionally schema in the form below to validate them.</p>
  </header>
  <main>
    <section>
      <form aria-label="Source" id="form">
        <div id="source">
          <div id="data-section">
            <label for="data">Data:</label>
            <textarea id="data" rows="10" cols="40"></textarea>
          </div>
          <div id="schema-section">
            <label for="schema">Schema:</label>
            <textarea id="schema" rows="10" cols="40"></textarea>
          </div>
        </div>
        <div id="options">
          <div>
            <span>Parsing:</span>
            <div>
              <input type="checkbox" id="comments">
              <label for="comments">Ignore comments</label>
            </div>
            <div>
              <input type="checkbox" id="trailing-commas">
              <label for="trailing-commas">Ignore trailing commas</label>
            </div>
            <div>
              <input type="checkbox" id="single-quoted-strings">
              <label for="single-quoted-strings">Allow single-quoted strings</label>
            </div>
            <div>
              <input type="checkbox" checked id="duplicate-object-keys">
              <label for="duplicate-object-keys">Allow duplicate object keys</label>
            </div>
          </div>
          <div>
            <span>Formatting:</span>
            <div>
              <input type="checkbox" checked id="format">
              <label for="format">Format output</label>
            </div>
            <div>
              <input type="checkbox" id="pretty-print">
              <label for="pretty-print">Pretty-print source</label>
            </div>
            <div>
              <input type="checkbox" id="sort-object-keys">
              <label for="sort-object-keys">Sort object keys</label>
            </div>
            <div style="display: none">
              <input type="checkbox" id="prune-comments">
              <label for="prune-comments">Omit comments</label>
            </div>
            <div style="display: none">
              <input type="checkbox" id="strip-object-keys">
              <label for="strip-object-keys">Strip quotes from object keys</label>
            </div>
            <div style="display: none">
              <input type="checkbox" id="enforce-double-quotes">
              <label for="enforce-double-quotes">Enforce double quotes</label>
            </div>
            <div style="display: none">
              <input type="checkbox" id="enforce-single-quotes">
              <label for="enforce-single-quotes">Enforce single quotes</label>
            </div>
            <div style="display: none">
              <input type="checkbox" id="trim-trailing-commas">
              <label for="trim-trailing-commas">Trim trailing commas</label>
            </div>
          </div>
          <div>
            <span>Standard:</span>
            <div>
              <input type="radio" name="mode" checked id="json">
              <label for="json">JSON</label>
            </div>
            <div>
              <input type="radio" name="mode" id="cjson">
              <label for="cjson">CJSON</label>
            </div>
            <div>
              <input type="radio" name="mode" id="json5">
              <label for="json5">JSON5</label>
            </div>
            <div>
              <input type="checkbox" id="with-schema">
              <label for="with-schema">Use JSON Schema</label>
            </div>
            <div>
              <select id="environment" aria-label="JSON Schema Environment">
                <option value="draft-04">JSON Schema draft 04</option>
                <option value="draft-06">JSON Schema draft 06</option>
                <option value="draft-07" selected>JSON Schema draft 07</option>
                <option value="draft-2019-09">JSON Schema draft 2019-09</option>
                <option value="draft-2020-12">JSON Schema draft 2020-12</option>
                <option value="jtd">JSON Type Definition</option>
              </select>
            </div>
          </div>
        </div>
        <button id="validate" type="button">Validate</button>
      </form>
    </section>
    <section id="result-section">
      <h2>Result</h2>
      <pre id="result"></pre>
    </section>
  </main>
  <hr>
  <footer>
    <small>Copyright &copy; 2012-2023 Zachary Carter, Ferdinand Prantl. See the <a href="https://github.com/prantlf/jsonlint#json-lint">project pages</a> to learn about command-line validation and programmatic usage.</small>
    <!-- See http://tholman.com/github-corners/ -->
    <a href="http://github.com/prantlf/jsonlint" class="github-corner" title="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  </footer>
  <script src="jsonlint.min.js" defer></script>
  <script src="sorter.min.js" defer></script>
  <script src="printer.min.js" defer></script>
  <script src="ajv.min.js" defer></script>
  <script src="validator.min.js" defer></script>
  <script defer>
    window.onload = function () {
      document
        .getElementById('with-schema')
        .addEventListener('change', toggleSchemaValidation)
      document
        .querySelectorAll('[name=mode]')
        .forEach(function (element) {
          element.addEventListener('change', selectParsingExtension)
        })
      document
        .getElementById('validate')
        .addEventListener('click', performValidation)
      document
        .getElementById('format')
        .addEventListener('change', correctFormatting.bind(null, 'format', 'pretty-print'))
      document
        .getElementById('pretty-print')
        .addEventListener('change', correctFormatting.bind(null, 'pretty-print', 'format'))
      document
        .getElementById('enforce-double-quotes')
        .addEventListener('change', ensureOneSelected.bind(null, 'enforce-double-quotes', 'enforce-single-quotes'))
      document
        .getElementById('enforce-single-quotes')
        .addEventListener('change', ensureOneSelected.bind(null, 'enforce-single-quotes', 'enforce-double-quotes'))

      function toggleSchemaValidation () {
        var className = document.getElementById('with-schema').checked
          ? 'with-schema' : ''
        document.getElementById('form').className = className
      }

      function selectParsingExtension () {
        var mode = document.querySelector('[name=mode]:checked').id
        document.getElementById('comments').parentElement.style.display =
          mode === 'cjson' || mode === 'json5' ? 'none' : 'block'
        document.getElementById('trailing-commas').parentElement.style.display =
          mode === 'json5' ? 'none' : 'block'
        document.getElementById('single-quoted-strings').parentElement.style.display =
          mode === 'json5' ? 'none' : 'block'
      }

      function correctFormatting (selected, other) {
        ensureOneSelected(selected, other)
        var forFormat = ['sort-object-keys']
        var forPrettyPrint = [
          'prune-comments', 'strip-object-keys', 'enforce-double-quotes',
          'enforce-single-quotes', 'trim-trailing-commas'
        ]
        swapWrapperVisibility(document.getElementById('pretty-print').checked,
          forPrettyPrint, forFormat)

        function swapWrapperVisibility (flag, show, hide) {
          if (!flag) {
            var temp = show
            show = hide
            hide = temp
          }
          setWrapperVisibility(show, 'block')
          setWrapperVisibility(hide, 'none')
        }

        function setWrapperVisibility (elements, display) {
          elements.forEach(function (element) {
            document.getElementById(element).parentElement.style.display = display
          })
        }
      }

      function ensureOneSelected (selected, other) {
        if (document.getElementById(selected).checked &&
            document.getElementById(other).checked) {
          document.getElementById(other).checked = false
        }
      }

      function performValidation () {
        document.getElementById('result-section').style.display = 'block'
        var parserOptions = getParserOptions()
        try {
          var source = document.getElementById('data').value
          var parsed = parseInput(source, parserOptions)
          document.getElementById('result').innerText = 'Data is valid!'
          document.getElementById('result').className = 'pass'
          if (document.getElementById('format').checked) {
            document.getElementById('data').value = formatOutput(parsed)
          } else if (document.getElementById('pretty-print').checked) {
            document.getElementById('data').value = printOutput(source)
          }
        } catch (error) {
          document.getElementById('result').innerText = error
          document.getElementById('result').className = 'fail'
        }

        function parseInput (source, parserOptions) {
          if (document.getElementById('with-schema').checked) {
            var schema = document.getElementById('schema').value
            var validate = jsonlintValidator.compile(schema, {
              environment: document.getElementById('environment').value,
              ...parserOptions
            })
            return validate(source, parserOptions)
          }
          return jsonlint.parse(source, parserOptions)
        }

        function formatOutput (parsed) {
          if (document.getElementById('sort-object-keys').checked) {
            parsed = jsonlintSorter.sortObject(parsed)
          }
          return JSON.stringify(parsed, null, '  ')
        }

        function printOutput (source) {
          parserOptions.rawTokens = true
          var tokens = jsonlint.tokenize(source, parserOptions)
          // TODO: Support sorting tor the tokenized input too.
          return jsonlintPrinter.print(tokens, {
            indent: 2,
            pruneComments: document.getElementById('prune-comments').checked,
            stripObjectKeys: document.getElementById('strip-object-keys').checked,
            enforceDoubleQuotes: document.getElementById('enforce-double-quotes').checked,
            enforceSingleQuotes: document.getElementById('enforce-single-quotes').checked,
            trimTrailingCommas: document.getElementById('trim-trailing-commas').checked
          })
        }

        function getParserOptions (mode) {
          var mode = document.querySelector('[name=mode]:checked').id
          return {
            mode: mode,
            ignoreComments: document.getElementById('comments').checked ||
                            mode === 'cjson' || mode === 'json5',
            ignoreTrailingCommas: document.getElementById('trailing-commas').checked ||
                                  mode === 'json5',
            allowSingleQuotedStrings: document.getElementById('single-quoted-strings').checked ||
                                      mode === 'json5',
            allowDuplicateObjectKeys: document.getElementById('duplicate-object-keys').checked,
          }
        }
      }
    }
  </script>
</body>
</html>