A powerful, modern web application for JSON formatting, validation, and comparison with a sleek dark-mode interface and professional developer experience.
JSON DERULE is a comprehensive JSON toolkit designed for developers who work with JSON data daily. It combines three essential JSON operations into one elegant, fast, and intuitive web application. Whether you need to format messy JSON, validate syntax, or compare two JSON objects for differences, JSON DERULE provides a professional-grade solution with a beautiful dark-mode interface.
The application features real-time processing, keyboard shortcuts for power users, detailed error reporting, and responsive design that works seamlessly across all devices. Built with modern web technologies, it offers the speed and reliability developers expect from their tools.
- 🎨 JSON Formatter: Beautiful formatting with customizable indentation
- ✅ JSON Validator: Real-time validation with detailed error reporting
- 🔍 JSON Compare: Visual diff with change tracking and statistics
- 🌙 Dark Mode: Professional dark interface optimized for developers
- ⚡ Real-time Processing: Instant feedback as you type
- ⌨️ Keyboard Shortcuts: Efficient workflows for power users
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Make sure you have the following installed on your development machine:
- Node.js (18.0 or later)
- npm or yarn package manager
- Git
Follow these steps to get your development environment running:
Step 1: Clone the repository
git clone https://github.com/diazjhozua/json-derule.git
cd json-deruleStep 2: Install dependencies
# Using npm
npm install
# Using yarn
yarn installStep 3: Start the development server
# Using npm
npm run dev
# Using yarn
yarn devThe application will be available at http://localhost:3000
Step 4: Build for production
# Using npm
npm run build
npm start
# Using yarn
yarn build
yarn start- Navigate: Go to the Formatter page (default landing page)
- Input: Paste your JSON data in the left editor
- Format: Click "Format" or press
Ctrl+Ffor beautiful formatting - Minify: Click "Minify" or press
Ctrl+Mto remove whitespace - Customize: Adjust indentation levels (1-8 spaces)
- Navigate: Click "Validator" in the navigation
- Input: Paste JSON data in the editor
- Validate: Turn on auto-validate for real-time feedback
- Review: View detailed statistics and error reports
- Fix: Use helpful suggestions to correct JSON syntax
- Navigate: Click "Compare" in the navigation
- Input: Paste JSON objects in both editors
- Compare: Enable auto-compare or click "Compare" manually
- Review: Examine detailed differences with change statistics
- Navigate: Expand sections to see before/after values
- Ctrl+F: Format JSON
- Ctrl+M: Minify JSON
- Ctrl+V: Validate JSON (when auto-validate is off)
- Ctrl+R: Compare JSON (when auto-compare is off)
- Ctrl+S: Swap JSON inputs (Compare page)
- Ctrl+K: Clear all content
- Beautiful syntax-highlighted formatting
- Customizable indentation (1-8 spaces)
- Minification for production use
- File size analysis and compression ratios
- Copy-to-clipboard functionality
- Real-time validation with auto-validate mode
- Detailed error messages with line numbers
- Comprehensive JSON statistics and analysis
- Data type breakdown and structure insights
- Helpful suggestions for common syntax errors
- Visual diff with color-coded changes
- Detailed change statistics (added, removed, modified)
- Expandable sections for detailed before/after comparison
- Auto-compare mode for real-time diff
- Type change detection and reporting
- Professional dark mode interface
- Responsive design for all screen sizes
- Fast, client-side processing
- Keyboard shortcuts for efficient workflows
- Accessible design following WCAG guidelines
- Next.js 14 - React framework with App Router
- React 18 - Component-based UI library
- Chakra UI - Modular and accessible component library
- TypeScript - Type-safe JavaScript development
- Emotion - CSS-in-JS library for styling
- Monaco Editor - VS Code editor for the web
- @diazjhozua - GitHub Profile - Creator & Lead Developer
See also the list of contributors who participated in this project.
- Chakra UI Team for the excellent component library
- Next.js Team for the amazing React framework
- TypeScript Team for bringing type safety to JavaScript
- Monaco Editor for providing the VS Code editing experience
- JSON.org for the JSON specification and inspiration
- The open-source community for continuous innovation and support
Happy JSON processing! 🛠️