index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary meta -->
    <title>JSONit — Online JSON Viewer, Formatter, Validator &amp; Repair Tool</title>
    <meta
      name="description"
      content="Free online JSON viewer, formatter, validator and repair tool. Beautify, minify, validate, fix broken JSON, explore as an interactive tree, query with JSONPath, and transform — 100% in your browser, your data never leaves your device."
    />
    <meta
      name="keywords"
      content="JSON viewer, JSON formatter, JSON beautifier, JSON validator, JSON editor online, JSON parser, JSON minifier, JSON pretty print, format JSON online, JSON repair, fix JSON, repair JSON online, JSON tree viewer, JSONPath, JSON query, JSON path finder, JSON lint, validate JSON, online JSON tool, JSON prettifier, stringify JSON, escape JSON, unescape JSON, JSON transform, JSON filter, NDJSON viewer, JSON log parser, sort JSON keys"
    />
    <meta name="author" content="Sukhcharan" />
    <meta name="robots" content="index, follow, max-image-preview:large" />
    <meta name="theme-color" content="#10b981" />
    <link rel="canonical" href="https://jsonit.sukhcharan.dev/" />

    <!-- Icons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- The web app manifest + service-worker registration are injected by vite-plugin-pwa. -->

    <!-- Open Graph (Facebook, LinkedIn, Slack, Discord…) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="JSONit" />
    <meta property="og:url" content="https://jsonit.sukhcharan.dev/" />
    <meta property="og:title" content="JSONit — Online JSON Viewer, Formatter, Validator &amp; Repair Tool" />
    <meta
      property="og:description"
      content="Beautify, minify, validate, fix broken JSON, explore as a tree, and query with JSONPath — a fast, private, 100% in-browser JSON toolbox."
    />
    <meta property="og:image" content="https://jsonit.sukhcharan.dev/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="1200" />
    <meta property="og:image:alt" content="JSONit — the fast, private JSON toolbox" />

    <!-- Twitter / X -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="JSONit — Online JSON Viewer, Formatter, Validator &amp; Repair Tool" />
    <meta
      name="twitter:description"
      content="Beautify, minify, validate, fix broken JSON, explore as a tree, and query with JSONPath — a fast, private, 100% in-browser JSON toolbox."
    />
    <meta name="twitter:image" content="https://jsonit.sukhcharan.dev/og-image.png" />

    <!-- Structured data: helps Google understand this is a free web app -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "JSONit",
        "url": "https://jsonit.sukhcharan.dev/",
        "description": "Free online JSON viewer, formatter, validator and repair tool. Beautify, minify, validate, fix broken JSON, explore as an interactive tree, query with JSONPath, and transform — 100% in your browser.",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Any (web browser)",
        "browserRequirements": "Requires JavaScript",
        "image": "https://jsonit.sukhcharan.dev/og-image.png",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "author": { "@type": "Person", "name": "Sukhcharan" },
        "featureList": [
          "JSON viewer and interactive tree explorer",
          "JSON formatter / beautifier and minifier",
          "JSON validator with exact error line and column",
          "Repair broken JSON (single quotes, trailing commas, comments, unquoted keys)",
          "Extract JSON from log lines and mixed text",
          "JSONPath query",
          "Field projection and JavaScript transform",
          "Search across keys and values",
          "Sort keys, stringify and unescape",
          "Runs fully client-side — data never leaves the browser"
        ]
      }
    </script>

    <!-- Set the theme + background before first paint so there's no light/dark flash on load. -->
    <script>
      (function () {
        try {
          var t = localStorage.getItem('jsonit-theme') || localStorage.getItem('jsonaut-theme') || localStorage.getItem('json-studio-theme')
          var dark = t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme: dark)').matches)
          document.documentElement.dataset.theme = dark ? 'dark' : 'light'
          document.documentElement.style.background = dark ? '#0a0b13' : '#f7f7fc'
        } catch (e) {}
      })()
    </script>

    <style>
      /* Minimal loader shown while the app's JS boots — replaced by React on mount (no content flash). */
      .app-loading {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .app-loading img {
        width: 48px;
        height: 48px;
        border-radius: 12px;
      }
      /* Styles for the <noscript> SEO fallback (only ever shown when JavaScript is disabled). */
      .seo-splash {
        max-width: 720px;
        margin: 0 auto;
        padding: 48px 24px 64px;
        font: 15px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: #dfe1ef;
        background: #0a0b13;
        min-height: 100vh;
      }
      .seo-splash img {
        width: 56px;
        height: 56px;
        border-radius: 14px;
      }
      .seo-splash h1 {
        font-size: 28px;
        line-height: 1.25;
        margin: 18px 0 8px;
        color: #fff;
      }
      .seo-splash h2 {
        font-size: 18px;
        margin: 32px 0 8px;
        color: #fff;
      }
      .seo-splash h3 {
        font-size: 15px;
        margin: 18px 0 4px;
        color: #6ee7b7;
      }
      .seo-splash a {
        color: #34d399;
      }
      .seo-splash ul {
        padding-left: 20px;
      }
      .seo-splash li {
        margin: 4px 0;
      }
      .seo-splash .muted {
        color: #8d90b3;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="app-loading" aria-hidden="true"><img src="/logo.svg" alt="" /></div>
    </div>

    <!-- SEO fallback: read by non-JavaScript crawlers, and shown only if JS is disabled.
         Real users never see this (so it can't flash), while search engines still get the content. -->
    <noscript>
      <main class="seo-splash">
        <img src="/logo.svg" alt="JSONit logo" />
        <h1>JSONit — Online JSON Viewer, Formatter, Validator &amp; Repair Tool</h1>
        <p>
          <strong>JSONit</strong> is a fast, private, entirely in-browser JSON toolbox. Paste text or open a file to
          <strong>view</strong>, <strong>format</strong> (beautify), <strong>minify</strong>, <strong>validate</strong>,
          and <strong>repair broken JSON</strong> — then explore it as an interactive tree, search keys and values, run
          <strong>JSONPath</strong> queries, and transform fields. Everything runs on your device; your data never leaves
          the browser.
        </p>

        <h2>What you can do with JSONit</h2>
        <ul>
          <li><strong>Format &amp; beautify JSON</strong> with configurable spaces or tabs, or minify to one line.</li>
          <li><strong>Validate JSON</strong> instantly, with the exact error line and column.</li>
          <li><strong>Repair broken JSON</strong> — single quotes, trailing commas, unquoted keys, comments, and even
            JSON embedded in log lines.</li>
          <li><strong>Explore an interactive tree</strong> — search, edit inline, right-click to copy, duplicate or
            delete, with color swatches for hex/rgb values.</li>
          <li><strong>Query with JSONPath</strong> and <strong>transform</strong> — pick fields to keep or flatten to a
            values array, then map each item with a JavaScript expression.</li>
          <li><strong>Sort keys, stringify, and unescape</strong>, with one-click copy and download.</li>
        </ul>

        <h2>Frequently asked questions</h2>
        <h3>Is JSONit free?</h3>
        <p>Yes — JSONit is completely free to use, with no sign-up required.</p>
        <h3>Is my JSON data private?</h3>
        <p>Yes. All parsing, formatting, validation, repair, and queries run locally in your browser. Your JSON is never
          uploaded to any server.</p>
        <h3>Can it fix invalid or broken JSON?</h3>
        <p>Yes. JSONit detects invalid JSON and offers a one-click fix for common problems like single quotes, trailing
          commas, unquoted keys, comments, and truncated documents — and can even extract JSON out of log files.</p>
        <h3>Does it work on large files?</h3>
        <p>Yes. Parsing runs in a background worker and the tree view renders only visible rows, so JSONit stays fast on
          multi-megabyte documents.</p>

      </main>
    </noscript>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>