JsonInspect is a lightweight developer tool designed to help you:
- 🔍 Inspect JSON structures visually
- 🌳 Navigate nested objects/arrays with a collapsible tree view
- 🛣️ List all paths in dot-notation (
user.address.city) - 🛠️ Generate TypeScript types automatically
- 📐 View minimal schemas for objects & arrays
- 🔄 Compare two JSON side-by-side with visual diff (GitHub-style)
- ⚡ Work instantly as you paste JSON (no backend, no login)
Perfect for backend devs, frontend devs, data engineers, or anyone dealing with messy JSON daily.
🌐 Try it online: jsoninspect.com
Paste JSON → instantly see structure, paths, types, and schema.
A clean, collapsible explorer for deeply nested data.
Generate every path inside your data, ideal for mapping, validation, and debugging.
Automatically infer:
- objects
- arrays
- unions
- optional fields
Output a clean, readabletype Root = { ... }.
Minimal, human-friendly schema for quick understanding.
Compare two JSON side-by-side with:
- Visual diff highlighting with real-time editing
- Color-coded differences: added (green), removed (red), modified (amber)
- Filterable results by difference type
- Synchronized scrolling between both JSONs
- Fullscreen mode for better visibility
- Search functionality in both JSONs
- Search through JSON content with instant highlighting
- Navigate between matches with Previous/Next buttons
- Minimal search bar for quick access
No backend.
Your data never leaves your machine.
Modern TailwindCSS interface with smooth interactions, dark mode support, and responsive design.
- Next.js 14 (App Router)
- TypeScript
- TailwindCSS
- React Hooks (pure React + recursion)
- Works entirely client-side
- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/yourusername/jsonbuddy.git
cd jsonbuddy
# Install dependencies
pnpm install
# Run development server
pnpm devOpen http://localhost:3000 in your browser.
pnpm build
pnpm start- Paste your JSON into the input field
- Explore the structure in the tree view
- View all paths, TypeScript types, or schema
- Use the search bar to find specific keys or values
- Switch to "Compare" mode
- Paste your first JSON in the left panel
- Paste your second JSON in the right panel
- See differences highlighted in real-time
- Use filters to show only added, removed, or modified items
- Use the search bar to find specific content in each JSON
- API Development: Inspect API responses and compare different versions
- Data Validation: Generate TypeScript types for your data structures
- Debugging: Find paths and understand nested JSON structures
- Documentation: Generate schemas and types for your documentation
- Data Migration: Compare JSON structures before and after migration
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- Website: jsoninspect.com
- GitHub: github.com/yourusername/jsonbuddy
Made with ❤️ for developers who work with JSON daily.