json-diff/index.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
167
<!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="Compare JSON online with our free JSON Diff tool. A fast and secure JSON difference checker for developers. Paste two JSON objects and see the differences instantly.">
    <meta name="theme-color" content="#ffffff">

    <!-- OpenGraph -->
    <meta property="og:title" content="JSON Diff - Compare JSON Online | Free & Fast JSON Compare Tool">
    <meta property="og:description" content="Compare JSON online with our free JSON Diff tool. A fast and secure JSON difference checker for developers. Paste two JSON objects and see the differences instantly.">
    <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="JSON Diff - Compare JSON Online | Free & Fast JSON Compare Tool">
    <meta name="twitter:description" content="Compare JSON online with our free JSON Diff tool. A fast and secure JSON difference checker for developers. Paste two JSON objects and see the differences instantly.">
    <!-- <meta name="twitter:image" content="YOUR_TWITTER_IMAGE_URL_HERE"> --> <!-- Add Twitter image later -->

    <title>JSON Diff - Compare JSON Online | Free & Fast JSON Compare Tool</title>

    <link rel="stylesheet" href="style.css">


    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->

    <!-- Schema Markup -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "JSON Diff - Compare JSON Online | Free & Fast JSON Compare Tool",
      "description": "Compare JSON online with our free JSON Diff tool. A fast and secure JSON difference checker for developers. Paste two JSON objects and see the differences instantly.",
      "url": "https://json-diff.cc/",
      "mainEntity": {
        "@type": "SoftwareApplication",
        "name": "Online JSON Diff & Compare 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 does JSON Diff work?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "The JSON Diff tool compares two JSON objects semantically. It identifies fields that have been added, removed, or modified between the two inputs and visually highlights these differences."
          }
        },
        {
          "@type": "Question",
          "name": "Is the comparison safe and private?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes, all processing happens directly in your browser using JavaScript. Your JSON data is never sent to any server, ensuring your data remains private and secure."
          }
        },
        {
            "@type": "Question",
            "name": "Can I download diff results?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Currently, the tool focuses on visual comparison within the browser. Downloading the diff results directly is not yet supported, but you can copy the highlighted differences."
            }
        }
      ]
    }
    </script>
</head>
<style>

</style>
<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 Diff Tool - Compare JSON Instantly</h1>
            <p>Use this online JSON diff tool to compare two JSON files or objects. Paste your JSON below to instantly view semantic differences with our JSON difference checker. Detect added, removed, and modified fields visually. Fast, free, and secure.</p>
             <div>
                 <a href="/formatter.html" class="button button-primary">
                      Go to JSON Formatter
                 </a>
            </div>
            <p>Need to format or validate JSON? Check out our <a href="/formatter.html">JSON Formatter tool</a>.</p>
        </section>

        <section id="diff-tool">
            <div class="diff-inputs">
                <div>
                    <label for="jsonInput1">JSON Input 1</label>
                    <textarea id="jsonInput1" rows="15"></textarea>
                </div>
                <div>
                    <label for="jsonInput2">JSON Input 2</label>
                    <textarea id="jsonInput2" rows="15"></textarea>
                </div>
            </div>
            <div class="diff-controls"
                 <button id="compareBtn" class="button button-success">
                    Start Comparing
                 </button>
            </div>
            <div>
                <h2>Differences</h2>
                <div id="diffOutput">
                    <!-- Diff results will be displayed here -->
                     <p class="placeholder">Differences will appear here after comparison.</p>
                </div>
                 <button id="copyDiffBtn" class="button button-secondary hidden">Copy Diff</button>
            </div>
        </section>

         <section id="faq">
            <h2>Frequently Asked Questions (FAQ)</h2>
            <div class="faq-container"> <!-- Removed Tailwind classes, added custom class -->
                <details>
                    <summary>How does JSON Diff work?</summary>
                    <p>The JSON Diff tool compares two JSON objects semantically. It identifies fields that have been added, removed, or modified between the two inputs and visually highlights these differences.</p>
                </details>
                <details>
                    <summary>Is the comparison safe and private?</summary>
                    <p>Yes, all processing happens directly in your browser using JavaScript. Your JSON data is never sent to any server, ensuring your data remains private and secure.</p>
                </details>
                 <details>
                    <summary>Can I download diff results?</summary>
                    <p>Currently, the tool focuses on visual comparison within the browser. Downloading the diff results directly is not yet supported, but you can copy the highlighted differences.</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>
</body>
</html>