json-diff/formatter.html at main · okeken/json-diff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
    <meta name="theme-color" content="#ffffff">
    <!-- OpenGraph -->
    <meta property="og:title" content="Online JSON Formatter & Validator - Beautify & Minify JSON">
    <meta property="og:description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://json-diff.cc/">
    <!-- <meta property="og:image" content="YOUR_OG_IMAGE_URL_HERE"> --> <!-- Add OG image later -->
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Online JSON Formatter & Validator - Beautify & Minify JSON">
    <meta name="twitter:description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
    <!-- <meta name="twitter:image" content="YOUR_TWITTER_IMAGE_URL_HERE"> --> <!-- Add Twitter image later -->

    <title>Online JSON Formatter & Validator - Beautify & Minify JSON</title>

    <link rel="stylesheet" href="style.css">
    <!-- Add favicon link later -->
    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->

    <!-- Schema Markup -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "Online JSON Formatter & Validator",
      "description": "Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.",
      "url": "https://json-diff.cc/formatter.html",
       "mainEntity": {
        "@type": "SoftwareApplication",
        "name": "JSON Formatter, Validator & Beautifier Tool",
        "applicationCategory": "DeveloperTool",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "How to format JSON online?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Simply paste your raw JSON data into the input area. The tool will automatically validate and format it into a readable structure. You can then copy the formatted JSON or download it as a file."
          }
        },
        {
          "@type": "Question",
          "name": "Is my JSON data secure?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes, absolutely. All JSON processing is done entirely within your browser using JavaScript. Your data is never sent to our servers, ensuring complete privacy and security."
          }
        },
        {
          "@type": "Question",
          "name": "Can I download the formatted JSON?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes, after formatting your JSON, you can click the 'Download JSON' button to save the formatted data as a .json file directly to your computer."
          }
        }
      ]
    }
    </script>
</head>
<body>
    <nav>
        <div>JSON Tools</div>
        <div>
          <a href="/">JSON Diff</a>
          <a href="/formatter.html">JSON Formatter</a>
          <button id="darkModeToggle">🌙/☀️</button>
      </div>
    </nav>

    <main class="container">
        <section id="intro">
            <h1>Online JSON Formatter & Validator</h1>
            <p>Easily format, beautify (pretty-print), validate, and minify your JSON data online. Paste your JSON to instantly format it. Copy, download, and ensure your JSON is valid. 100% free, secure, and client-side.</p>
             <div>
                 <a href="/" class="button button-primary">
                     Need to Compare JSON? Go to JSON Diff Tool
                 </a>
            </div>
        </section>

        <section id="formatter-tool">
            <div>
                <label for="jsonInput">Paste your JSON here:</label>
                <textarea id="jsonInput" rows="15" placeholder="Paste or type your JSON data here..."></textarea>
                <div id="validationError" class="error-message hidden">Invalid JSON</div>
            </div>

            <div class="formatter-controls">
                 <button id="formatBtn" class="button button-success">
                    Format JSON
                 </button>
                 <button id="minifyBtn" class="button button-warning">
                    Minify JSON
                 </button>
                 <button id="copyBtn" class="button button-secondary">
                    Copy to Clipboard
                 </button>
                 <button id="downloadBtn" class="button button-primary">
                    Download JSON
                 </button>
                 <label class="checkbox-label">
                    <input type="checkbox" id="autoFormat">
                    <span>Auto-format on paste</span>
                </label>
            </div>

            <div>
                <h2>Formatted Output:</h2>
                <pre id="jsonOutput"><code class="language-json"></code></pre>
                 <p id="outputPlaceholder" class="placeholder">Formatted JSON will appear here.</p>
            </div>
        </section>

         <section id="faq">
            <h2>Frequently Asked Questions (FAQ)</h2>
            <div class="faq-container"> <!-- Removed Tailwind classes, added custom class -->
                <details>
                    <summary>How to format JSON online?</summary>
                    <p>Simply paste your raw JSON data into the input area. The tool will automatically validate and format it into a readable structure. You can then copy the formatted JSON or download it as a file.</p>
                </details>
                <details>
                    <summary>Is my JSON data secure?</summary>
                    <p>Yes, absolutely. All JSON processing is done entirely within your browser using JavaScript. Your data is never sent to our servers, ensuring complete privacy and security.</p>
                </details>
                 <details>
                    <summary>Can I download the formatted JSON?</summary>
                    <p>Yes, after formatting your JSON, you can click the 'Download JSON' button to save the formatted data as a .json file directly to your computer.</p>
                </details>
            </div>
        </section>

        <section id="monetization-placeholder" class="promo-box">
            <h3>Unlock More Features!</h3>
            <p>Upgrade to the Pro Version for features like history saving, cloud synchronization, and more!</p>
            <button class="button button-warning">Learn More (Coming Soon)</button>
        </section>
    </main>

    <footer>
        © <span id="year"></span> JSON Tools. All rights reserved.
    </footer>

    <script src="script.js"></script> <!-- Common script for dark mode, year, etc. -->
    <script src="formatter.js"></script> <!-- Formatter specific script -->
</body>
</html>