docs-src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Big JSON Viewer Demo</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../styles/default.css" />
    <style type="text/css">
      body {
        font-family: Helvetica, serif;
      }
    </style>
  </head>
  <body>
    <div
      class="p-3"
      style="position: fixed; top: 0; right: 0; background: white; border: 1px solid #ccc"
    >
      <input type="text" placeholder="Search" id="search" />
      <span id="searchInfo"></span>
    </div>

    <div class="container">
      <h1 class="mt-3">Big JSON Viewer Demo</h1>

      <p>
        Watch large JSON structures in the Browser.<br />
        <a href="https://github.com/dhcode/big-json-viewer">On GitHub</a>
      </p>

      <h4 class="mt-3">JSON text</h4>
      <div>
        <a href="javascript:" data-load="simpleData">Simple test data</a> |
        <a href="javascript:" data-load="largeData">Large data</a> |
        <a href="javascript:" data-load="jsData">JavaScript data</a>
      </div>

      <div>
        <textarea
          id="code"
          style="min-height: 15em; width: 100%; font-family: monospace, serif; font-size: 0.8em"
        ></textarea>
      </div>

      <h4 class="mt-3">Big JSON Viewer output</h4>

      <div id="viewer"></div>

      <h5 class="mt-3">Open paths</h5>
      <div>
        <textarea
          id="paths"
          style="min-height: 6em; width: 100%; font-family: monospace, serif; font-size: 0.8em"
        ></textarea>
      </div>

      <h5 class="mt-3">Copied paths</h5>
      <div>
        <input
          type="text"
          id="copied"
          style="width: 100%; font-family: monospace, serif; font-size: 0.8em"
        />
      </div>

      <footer class="mt-5">
        Created by <a href="https://github.com/dhcode">Dominik Herbst</a>
      </footer>
    </div>

    <script src="demo.ts"></script>
  </body>
</html>