✦ Preact JSON Diff Inspector

A structured JSON comparison tool with editable panes, path search, and jsondiffpatch-powered change rows.

---

✨ Highlights

• Editable JSON Panes: Compare two JSON documents directly in the browser.
• Structured Diff Engine: Uses jsondiffpatch and flattens deltas into readable path rows.
• Path Search: Filters by JSON path, before value, or after value.
• Kind Filters: Narrows the diff table to added, removed, changed, or all rows.
• Review Actions: Swaps panes and formats valid JSON in place.
• Change Metrics: Shows added, removed, and changed counts.
• Clipboard Export: Copies a JSON summary of all diff rows.

🧱 Project Structure

src/
|-- main.tsx
|-- app.tsx           # JSON parsing, jsondiffpatch flattening, filterable diff table
`-- index.css

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• lucide-preact
• jsondiffpatch

📦 Included Sample Data

• public/sample-left.json and public/sample-right.json provide a ready-to-compare JSON pair.
• Use the in-app Load samples action to reload both panes from public files.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Invalid JSON is surfaced inline per panel without breaking the rest of the UI.
• The flattened diff rows are optimized for inspection and export, not for visual tree editing.
• Add RFC 6902 patch generation if this becomes a merge or review workflow.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a Vite-ready vercel.json with SPA rewrites.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.