A modern JSON processing web application built with Next.js 15 that provides powerful tools for merging and transforming JSON files. Process files securely in your browser with a beautiful, responsive interface.
- Merge multiple JSON files with compatible structures
- Smart structure validation with detailed error reporting
- Array and object merging with automatic type detection
- Real-time preview of merged results
- Field replacement using reference data mapping
- Advanced mapping rules with preview functionality
- Batch processing with detailed statistics
- Flexible transformation options
- Client-side processing - files never leave your browser
- No data collection - complete privacy protection
- Secure file handling with size limits and validation
- Dark theme with custom color palette
- Responsive design optimized for all devices
- Drag & drop file upload with validation
- Real-time feedback and error handling
- Node.js 18+ or higher
- npm, yarn, or pnpm
-
Clone the repository
git clone https://github.com/fiqto/synchrod.git cd synchrod -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
- Framework: Next.js 15 with App Router
- Language: TypeScript with strict type checking
- Styling: Tailwind CSS v4 with custom variables
- State Management: React hooks
- File Processing: Client-side JSON validation and processing
src/
├── app/ # Next.js App Router pages
│ ├── json-merge/ # JSON merge tool page
│ ├── json-replacer/ # JSON replacer tool page
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── json-merge/ # JSON merge components
│ ├── json-replacer/ # JSON replacer components
│ ├── navigation/ # Navigation components
│ └── ui/ # Shared UI components
├── lib/ # Core processing logic
│ ├── json-merger.ts # JSON merge functionality
│ └── json-replacer.ts # JSON replacement functionality
└── types/ # TypeScript type definitions
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Upload Files: Drag & drop or select multiple JSON files
- Structure Validation: Automatic compatibility checking
- Preview: Review merged structure before download
- Download: Get your unified JSON file
- Upload Files: Upload entries file + assets reference file
- Select Fields: Choose fields to replace with asset data
- Configure Mapping: Set up field matching rules
- Process: Transform and download results
# Build the project
npm run build
# Deploy the `.next` folder to your hosting providerNo environment variables required - the app runs entirely client-side.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- 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 licensed under the MIT License - see the LICENSE file for details.
If you have any questions or run into issues, please:
- Check the Issues section
- Create a new issue with detailed information
- Join the discussion in existing issues
- JSON Schema validation
- Data transformation templates
- Export to multiple formats (CSV, XML)
- Advanced filtering options
- Batch processing improvements
Built with ❤️ using Next.js and Tailwind CSS