A modern web application built with Next.js that allows users to convert JSON data to XML format with ease.
Light Mode | Dark Mode |
---|---|
![]() |
![]() |
- 🔄 Real-time JSON to XML conversion
- 🎨 Beautiful and responsive UI with dark/light mode support
- ✨ Syntax highlighting for both JSON and XML
- 📋 Easy copy/paste functionality
- 🔗 Shareable conversion links
- 📱 Mobile-friendly design
- 🎯 Built-in JSON validation and formatting
- 📚 Pre-built examples for quick testing
- Next.js 15 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- shadcn/ui - UI components
- xml-js - JSON to XML conversion
- React Syntax Highlighter - Code highlighting
- Node.js 20 or higher
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/anibalalpizar/json-to-xml-converter.git
cd json-to-xml-converter
- Install dependencies:
npm install
# or
yarn install
- Start the development server:
npm run dev
# or
yarn dev
- Open http://localhost:3000 in your browser
src/
├── app/ # Next.js app router
├── components/
│ ├── convert/ # Conversion-related components
│ ├── layout/ # Layout components
│ └── ui/ # Reusable UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and services
│ ├── services/ # Business logic services
│ └── utils.ts # Helper functions
└── types/ # TypeScript type definitions
- Enter or paste your JSON data in the left editor
- The converted XML will appear in real-time on the right
- Use the format button to beautify your JSON
- Share your conversion by clicking the share button
- Toggle between light and dark modes using the theme switcher
Try out the live demo at https://json-to-xml.vercel.app/
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 find this project helpful, please give it a ⭐️ on GitHub!