https://jsoneditor.net/assets/JsonDiff-D-HTp5Nq.js

1import{j as e,a as t}from"./index-Dpr3kEGh.js";import{S as n,a as i}from"./SharedFooter-Dphiw618.js";import{a as r,w as s}from"./monaco-editor-BhX8bGXp.js";import"./react-vendor-BJKXlyCa.js";const l='{\n  "name": "John Doe",\n  "age": 30,\n  "email": "[email protected]",\n  "address": {\n    "city": "New York",\n    "country": "USA"\n  },\n  "hobbies": ["reading", "gaming"],\n  "active": true\n}',a='{\n  "name": "John Smith",\n  "age": 31,\n  "email": "[email protected]",\n  "address": {\n    "city": "Los Angeles",\n    "country": "USA",\n    "zip": "90001"\n  },\n  "hobbies": ["reading", "traveling", "cooking"],\n  "active": true,\n  "premium": false\n}',o=({initialLeft:t="{\n  \n}",initialRight:n="{\n  \n}",theme:i="dark"})=>{const[o,d]=r.useState(t),[c,u]=r.useState(n),[f,m]=r.useState("side-by-side"),[h,p]=r.useState(0),[g,b]=r.useState(0),[x,y]=r.useState(null),[N,j]=r.useState(!0),v=r.useRef(null),C=r.useRef([]),S=r.useRef(null),k=r.useRef(null),O=r.useRef(t),L=r.useRef(n),w=r.useRef(!1),E=r.useRef(null),[M,V]=r.useState(!1),J=r.useCallback(e=>{const t=[];for(const n of e){const e=n.originalEndLineNumber-n.originalStartLineNumber+1,i=n.modifiedEndLineNumber-n.modifiedStartLineNumber+1,r=Math.max(e,i);if(0===n.originalStartLineNumber||0===n.originalEndLineNumber)for(let s=0;s<i;s++)t.push({originalLine:n.originalStartLineNumber||1,modifiedLine:n.modifiedStartLineNumber+s});else if(0===n.modifiedStartLineNumber||0===n.modifiedEndLineNumber)for(let s=0;s<e;s++)t.push({originalLine:n.originalStartLineNumber+s,modifiedLine:n.modifiedStartLineNumber||1});else for(let s=0;s<r;s++)t.push({originalLine:Math.min(n.originalStartLineNumber+s,n.originalEndLineNumber),modifiedLine:Math.min(n.modifiedStartLineNumber+s,n.modifiedEndLineNumber)})}return t},[]),R=r.useCallback(()=>{if(!v.current)return;const e=()=>{const e=v.current?.getLineChanges();if(e){const t=J(e);C.current=t,b(t.length)}};e(),setTimeout(e,100),setTimeout(e,300),setTimeout(e,500)},[J]);r.useEffect(()=>{R(),p(0)},[o,c,R]);const T=r.useCallback(e=>{if(!v.current)return;const t=C.current;if(!t||0===t.length)return;let n=h;n="next"===e?(h+1)%t.length:(h-1+t.length)%t.length,p(n);const i=t[n],r=v.current.getModifiedEditor(),s=v.current.getOriginalEditor();r.revealLineInCenter(i.modifiedLine),r.setPosition({lineNumber:i.modifiedLine,column:1}),s.revealLineInCenter(i.originalLine)},[h]),A=r.useCallback(async e=>{const t="left"===e?O.current:L.current;try{await navigator.clipboard.writeText(t),y(e),setTimeout(()=>y(null),1500)}catch{const n=document.createElement("textarea");n.value=t,document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n),y(e),setTimeout(()=>y(null),1500)}},[]),I=r.useCallback(()=>{if(w.current=!0,O.current=l,L.current=a,d(l),u(a),v.current){const e=v.current.getOriginalEditor().getModel(),t=v.current.getModifiedEditor().getModel();e&&e.setValue(l),t&&t.setValue(a)}w.current=!1},[]),F=r.useCallback((e,t)=>{const n=t.target.files?.[0];if(!n)return;const i=new FileReader;i.onload=t=>{const n=t.target?.result;if(w.current=!0,"left"===e){if(O.current=n,d(n),v.current){const e=v.current.getOriginalEditor().getModel();e&&e.setValue(n)}}else if(L.current=n,u(n),v.current){const e=v.current.getModifiedEditor().getModel();e&&e.setValue(n)}w.current=!1},i.readAsText(n),t.target.value=""},[]),D=r.useCallback(e=>{"left"===e?S.current?.click():k.current?.click()},[]),$=r.useCallback(()=>{w.current=!0;const e=O.current,t=L.current;if(O.current=t,L.current=e,d(t),u(e),v.current){const n=v.current.getOriginalEditor().getModel(),i=v.current.getModifiedEditor().getModel();n&&n.setValue(t),i&&i.setValue(e)}w.current=!1},[]),P=r.useCallback(e=>{try{if(w.current=!0,"left"===e||"both"===e){const e=JSON.stringify(JSON.parse(O.current),null,2);if(O.current=e,d(e),v.current){const t=v.current.getOriginalEditor().getModel();t&&t.setValue(e)}}if("right"===e||"both"===e){const e=JSON.stringify(JSON.parse(L.current),null,2);if(L.current=e,u(e),v.current){const t=v.current.getModifiedEditor().getModel();t&&t.setValue(e)}}w.current=!1}catch{w.current=!1}},[]),U=r.useCallback(e=>{const t="{\n  \n}";if(w.current=!0,("left"===e||"both"===e)&&(O.current=t,d(t),v.current)){const e=v.current.getOriginalEditor().getModel();e&&e.setValue(t)}if(("right"===e||"both"===e)&&(L.current=t,u(t),v.current)){const e=v.current.getModifiedEditor().getModel();e&&e.setValue(t)}w.current=!1},[]),z=r.useMemo(()=>{try{const e=o.trim()?JSON.parse(o):{},t=c.trim()?JSON.parse(c):{},n=(e,t)=>{let i=0,r=0,s=0;if(typeof e!=typeof t)return s++,{added:i,removed:r,modified:s};if("object"!=typeof e||null===e)return e!==t&&s++,{added:i,removed:r,modified:s};if(Array.isArray(e)&&Array.isArray(t)){const l=Math.max(e.length,t.length);for(let a=0;a<l;a++)if(a>=e.length)i++;else if(a>=t.length)r++;else{const l=n(e[a],t[a]);i+=l.added,r+=l.removed,s+=l.modified}return{added:i,removed:r,modified:s}}if("object"==typeof e&&"object"==typeof t){const l=e,a=t,o=new Set([...Object.keys(l),...Object.keys(a)]);for(const e of o)if(e in l)if(e in a){const t=n(l[e],a[e]);i+=t.added,r+=t.removed,s+=t.modified}else r++;else i++}return{added:i,removed:r,modified:s}};return n(e,t)}catch{return{added:0,removed:0,modified:0}}},[o,c]),B=0===z.added&&0===z.removed&&0===z.modified&&o.trim()&&c.trim(),H=r.useCallback((e,t)=>{if(!t)return 1;const n=e.split("\n"),i=t.split(/\.|\[/).map(e=>e.replace("]","")),r=(e=>{let t=0;for(let i=0;i<n.length;i++){const r=n[i],s=r.trim();for(const e of r);if(t<e.length){const n=e[t];if(new RegExp(`"${n}

1"\\s*:`).test(s)){if(t++,t===e.length)return i+1}else if(!isNaN(Number(n))&&t>0)return null}}return null})(i);if(null!==r)return r;const s=t.lastIndexOf("."),l=t.lastIndexOf("["),a=Math.max(s,l);if(a>0){const n=t.substring(0,a).replace(/\]$/,"");return H(e,n)}const o=i[i.length-1];if(isNaN(Number(o)))for(let d=0;d<n.length;d++)if(n[d].includes(`"${o}"`))return d+1;return 1},[]),W=r.useCallback(e=>{if(!v.current)return;const t=v.current.getModifiedEditor(),n=v.current.getOriginalEditor();if("removed"===e.type){const t=H(O.current,e.path);n.revealLineInCenter(t),n.setPosition({lineNumber:t,column:1}),n.focus()}else if("added"===e.type){const n=H(L.current,e.path);t.revealLineInCenter(n),t.setPosition({lineNumber:n,column:1}),t.focus()}else{const i=H(O.current,e.path),r=H(L.current,e.path);n.revealLineInCenter(i),t.revealLineInCenter(r),t.setPosition({lineNumber:r,column:1}),t.focus()}},[H]),q=r.useCallback(e=>JSON.stringify(e,null,2).replace(/\[\s+([\d\w"\s,.-]+?)\s+\]/g,(e,t)=>{if(/[{\[]/.test(t))return e;const n=`[${t.split("\n").map(e=>e.trim()).join(" ")}]`;return n.length<120?n:e}),[]),G=(e,t,n)=>{if(!t)return n;const i=JSON.parse(JSON.stringify(e)),r=t.split(/\.|\[/).map(e=>e.replace("]",""));let s=i;for(let l=0;l<r.length-1;l++){const e=r[l],t=r[l+1],n=!isNaN(Number(t));e in s||(s[e]=n?[]:{}),s=s[e]}return s[r[r.length-1]]=n,i},X=(e,t)=>{if(!t)return{};const n=JSON.parse(JSON.stringify(e)),i=t.split(/\.|\[/).map(e=>e.replace("]",""));let r=n;for(let l=0;l<i.length-1;l++){const e=i[l];if(!(e in r))return n;r=r[e]}const s=i[i.length-1];return Array.isArray(r)?r.splice(Number(s),1):delete r[s],n},Y=r.useCallback(e=>{try{let t=JSON.parse(L.current);if("removed"===e.type){const n=JSON.parse(O.current),i=e.path.split(/\.|\[/).map(e=>e.replace("]",""));let r=n;for(const e of i)r=r[e];t=G(t,e.path,r)}else"modified"===e.type?t=G(t,e.path,e.rawOldValue):"added"===e.type&&(t=X(t,e.path));const n=q(t);if(L.current=n,u(n),v.current){const e=v.current.getModifiedEditor().getModel();e&&e.setValue(n)}}catch{}},[q]),K=r.useCallback(e=>{try{let t=JSON.parse(O.current);if("added"===e.type){const n=JSON.parse(L.current),i=e.path.split(/\.|\[/).map(e=>e.replace("]",""));let r=n;for(const e of i)r=r[e];t=G(t,e.path,r)}else"modified"===e.type?t=G(t,e.path,e.rawNewValue):"removed"===e.type&&(t=X(t,e.path));const n=q(t);if(O.current=n,d(n),v.current){const e=v.current.getOriginalEditor().getModel();e&&e.setValue(n)}}catch{}},[q]),Q=r.useMemo(()=>{try{const e=o.trim()?JSON.parse(o):{},t=c.trim()?JSON.parse(c):{},n=[],i=e=>void 0===e?"undefined":null===e?"null":"string"==typeof e?`"${e}"`:"object"==typeof e?JSON.stringify(e):String(e),r=(e,t,s)=>{if(typeof e==typeof t)if("object"==typeof e&&null!==e&&null!==t){if(Array.isArray(e)&&Array.isArray(t)){const l=Math.max(e.length,t.length);for(let a=0;a<l;a++){const l=`${s}[${a}]`;a>=e.length?n.push({path:l,type:"added",newValue:i(t[a]),rawNewValue:t[a]}):a>=t.length?n.push({path:l,type:"removed",oldValue:i(e[a]),rawOldValue:e[a]}):r(e[a],t[a],l)}return}if("object"==typeof e&&"object"==typeof t){const l=e,a=t,o=new Set([...Object.keys(l),...Object.keys(a)]);for(const e of o){const t=s?`${s}.${e}`:e;e in l?e in a?r(l[e],a[e],t):n.push({path:t,type:"removed",oldValue:i(l[e]),rawOldValue:l[e]}):n.push({path:t,type:"added",newValue:i(a[e]),rawNewValue:a[e]})}}}else e!==t&&n.push({path:s,type:"modified",oldValue:i(e),newValue:i(t),rawOldValue:e,rawNewValue:t});else n.push({path:s,type:"modified",oldValue:i(e),newValue:i(t),rawOldValue:e,rawNewValue:t})};return r(e,t,""),n}catch{return[]}},[o,c]),Z=r.useRef([]),_=r.useRef(K),ee=r.useRef(Y);return r.useEffect(()=>{Z.current=Q,_.current=K,ee.current=Y},[Q,K,Y]),r.useEffect(()=>{const e=E.current;if(!e)return;const t=e=>{const t=e.detail,n=Z.current[t];n&&_.current(n)},n=e=>{const t=e.detail,n=Z.current[t];n&&ee.current(n)};return e.addEventListener("merge-to-left",t),e.addEventListener("merge-to-right",n),()=>{e.removeEventListener("merge-to-left",t),e.removeEventListener("merge-to-right",n)}},[]),r.useEffect(()=>{if(!M||!v.current)return;const e=v.current,t=e.getModifiedEditor(),n=e.getOriginalEditor(),i=()=>{const e=E.current;if(!e)return;

1e.querySelectorAll(".injected-merge-btn").forEach(e=>e.remove());const i=t.getScrollTop(),r=e.getBoundingClientRect(),s=n.getContainerDomNode().getBoundingClientRect(),l=t.getContainerDomNode().getBoundingClientRect(),a=(s.right+l.left)/2-r.left,o=new Map;Q.forEach((e,r)=>{const s="removed"===e.type?H(O.current,e.path):H(L.current,e.path);const l=("removed"===e.type?n:t).getTopForLineNumber(s)-i,a=Math.round(l);o.has(a)||o.set(a,{items:[],indices:[]}),o.get(a)?.items.push(e),o.get(a)?.indices.push(r)}),o.forEach((t,n)=>{if(n<-20||n>e.clientHeight)return;const i=document.createElement("div");i.className="injected-merge-btn";i.style.cssText=`\n          position: absolute;\n          top: ${n}px;\n          left: ${a}px; \n          transform: translateX(-50%);\n          display: flex;\n          gap: 1px;\n          z-index: 100;\n          height: 16px; \n          align-items: center;\n          background: var(--bg-secondary);\n          border-radius: 8px; /* Pill shape */\n          padding: 0 1px;\n          border: 1px solid var(--border-color);\n          width: 34px;\n          justify-content: center;\n          opacity: 0.6;\n          transition: opacity 0.2s, transform 0.2s;\n        `,i.onmouseenter=()=>{i.style.opacity="1",i.style.transform="translateX(-50%) scale(1.1)",i.style.zIndex="101"},i.onmouseleave=()=>{i.style.opacity="0.6",i.style.transform="translateX(-50%) scale(1)",i.style.zIndex="100"};const r=t.items.some(e=>"added"===e.type),s=t.items.some(e=>"removed"===e.type);i.style.borderColor=r&&!s?"rgba(90, 154, 110, 0.5)":s&&!r?"rgba(179, 90, 90, 0.5)":"var(--border-color)";const l=document.createElement("button");l.innerHTML="‹",l.title="Copy Right to Left",l.className="merge-gutter-btn",l.style.cssText="flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; padding-bottom: 2px; cursor: pointer;",l.onclick=n=>{n.stopPropagation(),t.indices.forEach(t=>{const n=new CustomEvent("merge-to-left",{detail:t});e.dispatchEvent(n)})};const o=document.createElement("button");o.innerHTML="›",o.title="Copy Left to Right",o.className="merge-gutter-btn",o.style.cssText="flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; padding-bottom: 2px; cursor: pointer;",o.onclick=n=>{n.stopPropagation(),t.indices.forEach(t=>{const n=new CustomEvent("merge-to-right",{detail:t});e.dispatchEvent(n)})},i.appendChild(l),i.appendChild(o),e.appendChild(i)})},r=t.onDidScrollChange(i),s=n.onDidLayoutChange(i),l=v.current.onDidUpdateDiff(i);return setTimeout(i,100),()=>{r.dispose(),s.dispose(),l.dispose()}},[M,Q,H]),e.jsxs("div",{className:"json-diff-view",children:[e.jsxs("div",{className:"diff-header",style:{display:"flex",flexWrap:"wrap",gap:"16px",alignItems:"center",justifyContent:"center",background:"var(--bg-secondary)",padding:"10px 16px",borderBottom:"1px solid var(--border-color)"},children:[e.jsx("div",{className:"diff-stats",children:B?e.jsx("span",{className:"stat-identical",children:"✓ Identical"}):e.jsxs(e.Fragment,{children:[z.added>0&&e.jsxs("span",{className:"stat-added",children:["+",z.added]}),z.removed>0&&e.jsxs("span",{className:"stat-removed",children:["-",z.removed]}),z.modified>0&&e.jsxs("span",{className:"stat-modified",children:["~",z.modified]})]})}),e.jsxs("div",{className:"diff-actions",style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsxs("div",{className:"diff-nav",children:[e.jsx("button",{className:"nav-btn",onClick:()=>T("prev"),disabled:0===g,title:"Previous difference",children:"↑ Prev"}),e.jsx("span",{className:"diff-counter",children:g>0?`${h+1}/${g}`:"0/0"}),e.jsx("button",{className:"nav-btn",onClick:()=>T("next"),disabled:0===g,title:"Next difference",children:"↓ Next"})]}),Q.length>0&&e.jsxs("div",{className:"quick-merge",children:[e.jsx("button",{className:"quick-merge-btn to-left",onClick:()=>Q[h]&&K(Q[h]),disabled:!Q[h],title:"Apply current diff to Left",children:"← Use Right"}),e.jsx("button",{className:"quick-merge-btn to-right",onClick:()=>

1Q[h]&&Y(Q[h]),disabled:!Q[h],title:"Apply current diff to Right",children:"Use Left →"})]}),e.jsxs("div",{className:"view-toggle",children:[e.jsx("button",{className:"side-by-side"===f?"active":"",onClick:()=>m("side-by-side"),title:"Side by side view",children:"⊟ Side"}),e.jsx("button",{className:"inline"===f?"active":"",onClick:()=>m("inline"),title:"Inline view",children:"≡ Inline"})]}),e.jsxs("div",{className:"toolbar-group",children:[e.jsx("button",{onClick:I,title:"Load sample data",children:"📋 Sample"}),e.jsx("button",{onClick:()=>P("both"),title:"Format both",children:"✨ Format"}),e.jsx("button",{onClick:()=>U("both"),title:"Clear both",children:"🗑️ Clear"})]})]})]}),e.jsx("input",{type:"file",ref:S,style:{display:"none"},accept:".json,.txt,application/json,text/plain",onChange:e=>F("left",e)}),e.jsx("input",{type:"file",ref:k,style:{display:"none"},accept:".json,.txt,application/json,text/plain",onChange:e=>F("right",e)}),e.jsxs("div",{className:"diff-labels-container",children:[e.jsxs("div",{className:"diff-labels",children:[e.jsxs("div",{className:"diff-label left",children:[e.jsx("span",{children:"Left"}),e.jsxs("div",{className:"label-actions",children:[e.jsx("button",{onClick:()=>D("left"),title:"Open file",className:"open-btn",children:"📂 Open"}),e.jsx("button",{onClick:()=>A("left"),title:"Copy to clipboard",className:"left"===x?"copied":"",children:"left"===x?"✓ Copied":"Copy"}),e.jsx("button",{onClick:()=>P("left"),title:"Format",children:"Format"}),e.jsx("button",{onClick:()=>U("left"),title:"Clear",children:"Clear"})]})]}),e.jsxs("div",{className:"diff-label right",children:[e.jsx("span",{children:"Right"}),e.jsxs("div",{className:"label-actions",children:[e.jsx("button",{onClick:()=>D("right"),title:"Open file",className:"open-btn",children:"📂 Open"}),e.jsx("button",{onClick:()=>A("right"),title:"Copy to clipboard",className:"right"===x?"copied":"",children:"right"===x?"✓ Copied":"Copy"}),e.jsx("button",{onClick:()=>P("right"),title:"Format",children:"Format"}),e.jsx("button",{onClick:()=>U("right"),title:"Clear",children:"Clear"})]})]})]}),e.jsx("button",{className:"swap-btn-center",onClick:$,title:"Swap left and right",children:"⇄"})]}),e.jsx("div",{className:"diff-editor-container",ref:E,children:e.jsx(s,{height:"100%",language:"json",original:t,modified:n,theme:"dark"===i?"vs-dark":"light",onMount:e=>{v.current=e,V(!0);let t=null,n=null;const i=e.getModifiedEditor();i.onDidChangeModelContent(()=>{const e=i.getValue();L.current=e,n&&clearTimeout(n),n=setTimeout(()=>{u(e)},300)});const r=e.getOriginalEditor();r.onDidChangeModelContent(()=>{const e=r.getValue();O.current=e,t&&clearTimeout(t),t=setTimeout(()=>{d(e)},300)}),R()},options:{renderSideBySide:"side-by-side"===f,minimap:{enabled:!1},fontSize:13,lineNumbers:"on",scrollBeyondLastLine:!1,automaticLayout:!0,wordWrap:"on",wrappingStrategy:"advanced",originalEditable:!0,readOnly:!1,ignoreTrimWhitespace:!1,renderIndicators:!1,diffWordWrap:"on",glyphMargin:!0}})}),N?e.jsxs("div",{className:"diff-list-panel",children:[e.jsxs("div",{className:"diff-list-header",children:[e.jsxs("span",{children:["Differences (",Q.length,")"]}),Q.length>0&&e.jsxs("div",{className:"diff-list-actions",children:[e.jsx("button",{className:"merge-all-btn",onClick:()=>Q.forEach(e=>K(e)),title:"Apply all changes to Left (make Left = Right)",children:"← All to Left"}),e.jsx("button",{className:"merge-all-btn",onClick:()=>Q.forEach(e=>Y(e)),title:"Apply all changes to Right (make Right = Left)",children:"All to Right →"})]}),e.jsx("button",{onClick:()=>j(!1),className:"close-btn",title:"Hide panel",children:"×"})]}),e.jsx("div",{className:"diff-list-content",children:0===Q.length?e.jsx("div",{className:"diff-list-empty",children:"No differences found"}):Q.map((t,n)=>e.jsxs("div",{className:`diff-list-item ${t.type}`,children:[e.jsxs("div",{className:"diff-item-main",onClick:()=>W(t),title:"Click to navigate",children:[e.jsx("span",{className:"diff-path",children:t.path||"(root)"}),e.jsx("span",{className:`diff-type ${t.type}`,children:"added"===t.type?"ONLY RIGHT":"removed"===t.type?"ONLY LEFT":"DIFFERENT"}),e.jsxs("div",{className:"diff-values",children:["modified"===t.type&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"old-value",children:t.oldValue}),e.jsx("span",{className:"arrow",children:"→"}),e.jsx("span",{className:"new-value",children:t.newValue})]}),"added"===t.type&&e.jsx("span",{className:"new-value",children:t.newValue}),"removed"===t.type&&e.jsx("span",{className:"old-value",children:t.oldValue})]})]}),e.jsxs("div",{className:"diff-merge-actions",children:[e.jsx("button",{className:"merge-btn merge-to-left",onClick:e=>{e.stopPropagation(),K(t)},title:"added"===t.type?"Copy to Left":"removed"===t.type?"Remove from Left":"Use Right value",children:"←"}),e.jsx("button",{className:"merge-btn merge-to-right",onClick:e=>{e.stopPropagation(),Y(t)},title:"removed"===t.type?"Copy to Right":"added"===t.type?"Remove from Right":"Use Left value",children:"→"})]})]},n))})]}):e.jsxs("div",{className:"diff-status-bar",onClick:()=>j(!0),children:[e.jsxs("span",{className:"status-info",children:[e.jsx("span",{className:"help-item added",children:"Green = Only in Right"}),e.jsx("span",{className:"help-item removed",children:"Red = Only in Left"})]}),e.jsxs("button",{className:"show-panel-btn",title:"Show differences panel",children:["Differences (",Q.length,") ▲"]})]})]})},d=()=>(t({title:"JSON Diff - Compare JSON Online | JSONEditor.net",description:"Free online JSON diff tool. Compare two JSON files side by side, see differences highlighted in real-time. Find added, removed, and modified values instantly.",canonical:"https://jsoneditor.net/json-diff"}),e.jsxs("div",{className:"json-diff-wrapper",children:[e.jsx(n,{}),e.jsxs("div",{className:"json-diff-hero",children:[e.jsx("h1",{children:"JSON Diff"}),e.jsx("p",{children:"Compare two JSON files side by side and instantly spot differences"})]}),e.jsx("div",{className:"json-diff-page",children:e.jsx("main",{className:"json-diff-main",children:e.jsx(o,{theme:"dark"})})}),e.jsx("section",{className:"json-diff-seo",children:e.jsxs("div",{className:"seo-container",children:[e.jsx("h2",{children:"Free Online JSON Diff Tool"}),e.jsx("p",{children:"Compare JSON files instantly with our powerful diff tool. Whether you're debugging API responses, comparing configuration files, or tracking changes in data structures, JSON Diff makes it easy to spot every difference between two JSON documents."}),e.jsxs("div",{className:"seo-grid",children:[e.jsxs("div",{className:"seo-block",children:[e.jsx("h3",{children:"Key Features"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Side-by-side comparison"})," - View both JSON files simultaneously"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Inline diff mode"})," - Unified view similar to Git diffs"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Clickable differences"})," - Jump directly to any change"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"File upload support"})," - Load JSON files from your computer"]})]})]}),e.jsxs("div",{className:"seo-block",children:[e.jsx("h3",{children:"How to Use"}),e.jsxs("ul",{children:[e.jsx("li",{children:"Paste your JSON in the left and right panels"}),e.jsx("li",{children:'Or use the "Open" button to load files'}),e.jsx("li",{children:"Differences highlight automatically in real-time"}),e.jsx("li",{children:"Click items in the differences panel to navigate"})]})]})]})]})}),e.jsx(i,{})]}));export{d as JsonDiff};