JSON Compare Tool

A modern web application for comparing JSON structures with multiple comparison modes, built with Nuxt 3, Vue 3, and TypeScript.

Features

• Smart Comparison: Structure and complete comparison modes
• Professional Editor: CodeMirror 6 with syntax highlighting
• Modern Interface: Responsive design with light/dark theme
• TypeScript: Full static typing
• Clean Architecture: Modular structure with composables and stores

Project Structure

├── components/          # Reusable Vue components
├── composables/         # Reusable Vue logic  
├── stores/             # Global state (Pinia)
├── utils/              # Utilities and helpers
├── types/              # TypeScript definitions
├── assets/             # Static assets
├── middleware/         # Nuxt middleware
├── plugins/            # Nuxt plugins
├── app.vue             # Root component
└── nuxt.config.ts      # Configuration

Technologies

• Framework: Nuxt 3
• UI: Vue 3 + Composition API
• Styling: TailwindCSS
• Editor: CodeMirror 6
• State: Pinia
• Typing: TypeScript
• Build: Vite

Installation

# Install dependencies
pnpm install

# Development server
pnpm dev

# Production build
pnpm build

# Preview build
pnpm preview

Usage

1. Paste JSON: Enter your JSONs in the editors
2. Select Mode: Structure or Complete
3. Compare: View highlighted differences
4. Navigate: Use arrows to navigate between differences

Keyboard Shortcuts

• Ctrl+S: Format JSON
• Ctrl+A: Select all
• Ctrl+D: Select line
• Alt+↑/↓: Move line
• Shift+Alt+↓: Duplicate line
• ←/→: Navigate differences

Architecture

Composables

• useJsonComparison: Comparison logic
• useTheme: Light/dark theme management

Store (Pinia)

• Global application state
• Difference and navigation management

Components

• Modular and reusable
• TypeScript typed props
• Scoped styles

Configuration

The project uses aliases for clean imports:

// Instead of
import { JsonComparator } from '../../../utils/jsonComparator'

// Use
import { JsonComparator } from '~/utils/jsonComparator'

SEO Optimized

• Meta tags for search engines
• Open Graph for social sharing
• Structured data markup
• Performance optimized

License

MIT