A modern, fast, and intuitive JSON formatting and validation tool built with React, TypeScript, and shadcn-ui. Features syntax highlighting, JSON diff comparison, auto-fix capabilities, and a clean dark/light theme.
- Format/Beautify - Convert compact JSON to a readable, indented format
- Minify - Compress JSON by removing whitespace
- Validate - Check JSON syntax and get detailed error messages
- Auto-Fix - Automatically fix common JSON errors:
- Replace single quotes with double quotes
- Add quotes to unquoted keys
- Remove trailing commas
- Balance missing/extra brackets and braces
- Compare two JSON files side-by-side
- Highlight differences with color coding:
- Green: Added properties
- Red: Removed properties
- Yellow: Changed values
- Detailed diff table with paths and value changes
- Syntax highlighting with distinct colors for keys, strings, numbers, booleans, and null
- Line numbers with error line highlighting
- Word wrap toggle
- Search within JSON with match navigation
- Tabbed editing for multiple JSON files
- Upload JSON files from local storage
- Download formatted JSON
- History management (save and load previous work)
- Clean, modern UI with shadcn-ui components
- Dark/Light theme toggle
- Responsive design for desktop and mobile
- Toast notifications for user feedback
- Framework: React 18 with TypeScript
- Build Tool: Vite
- UI Components: shadcn-ui
- Styling: Tailwind CSS
- Routing: React Router DOM
- Testing: Vitest with Testing Library
- Node.js (v18 or higher recommended)
- npm, yarn, or bun
- Clone the repository:
git clone https://github.com/FadhilAlif/json-polish.git
cd json-polish- Install dependencies:
npm install
# or
yarn install
# or
bun install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm run build:dev |
Build for development mode |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint for code quality |
npm run test |
Run tests once |
npm run test:watch |
Run tests in watch mode |
json-polish/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # shadcn-ui components
│ │ ├── CodePanel.tsx # Code editor with syntax highlighting
│ │ ├── Header.tsx # App header with navigation
│ │ ├── Toolbar.tsx # Action toolbar
│ │ ├── TabBar.tsx # Tab management
│ │ ├── SearchBar.tsx # Search functionality
│ │ └── ...
│ ├── hooks/ # Custom React hooks
│ │ ├── useJsonTabs.ts # Tab state management
│ │ ├── useJsonHistory.ts # History persistence
│ │ └── useSearch.ts # Search functionality
│ ├── lib/ # Utility functions
│ │ └── json-utils.ts # JSON parsing, formatting, diffing
│ ├── pages/ # Page components
│ │ ├── Index.tsx # Main formatter page
│ │ ├── DiffPage.tsx # JSON diff comparison page
│ │ └── NotFound.tsx # 404 page
│ └── main.tsx # App entry point
├── public/ # Static assets
└── ...config files
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.