Format-X 🚀

A powerful tool for converting between different data formats

Live Demo • Report Bug • Request Feature

✨ Features

• 🔄 Multi-format Conversion: Convert between JSON, XML, YAML, CSV, and Plain Text
• 🚀 Real-time Processing: Instant conversion as you type
• 🎯 Auto-detection: Automatically detects input format
• 🎨 Syntax Highlighting: Beautiful Monaco Editor with syntax highlighting
• 📱 Responsive Design: Works perfectly on desktop and mobile
• 🌙 Dark Theme: Eye-friendly dark interface
• 📋 Copy to Clipboard: Easy copying of input and output
• ⚡ Fast & Efficient: Built with performance in mind
• 🔄 Swap Panels: Quickly swap input and output
• ✅ Format Validation: Real-time validation with error messages

🚀 Quick Start

Prerequisites

• Node.js 22+
• pnpm

Installation

1. Clone the repository

   git clone https://github.com/isaias-alt/format-x.git
   cd format-x

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm dev

4. Open your browser

   Navigate to http://localhost:3000

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui
• Code Editor: Monaco Editor
• Icons: Lucide React
• Notifications: Sonner
• Deployment: Vercel

📁 Project Structure

format-x/
├── public/
│   ├── logo.png
│   ├── og.webp
│   ├── robots.txt
│   └── site.webmanifest
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── sitemap.ts
│   ├── components/
│   │   ├── converter/
│   │   │   ├── converter-panels.tsx
│   │   │   ├── format-controls.tsx
│   │   │   ├── input-panel.tsx
│   │   │   ├── output-panel.tsx
│   │   │   └── status-bar.tsx
│   │   ├── ui/
│   │   │   ├── button.tsx
│   │   │   └── select.tsx
│   │   ├── code-editor.tsx
│   │   ├── footer.tsx
│   │   ├── header.tsx
│   │   └── monaco-loader.tsx
│   ├── hooks/
│   │   ├── useConverter.ts
│   │   └── useConverterActions.ts
│   └── lib/
│       ├── clipboard.ts
│       ├── constants.ts
│       ├── converters.ts
│       ├── formatDetector.ts
│       ├── formatters.ts
│       └── utils.ts
├── LICENSE
├── README.md
├── CONTRIBUTING.md
└── package.json

🎯 Usage Examples

JSON to XML

{
  "name": "John Doe",
  "age": 30,
  "skills": ["JavaScript", "React", "Node.js"]
}

Converts to:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <name>John Doe</name>
  <age>30</age>
  <skills>
    <item_0>JavaScript</item_0>
    <item_1>React</item_1>
    <item_2>Node.js</item_2>
  </skills>
</root>

JSON to YAML

name: John Doe
age: 30
skills:
  - JavaScript
  - React
  - Node.js

Plain Text to JSON

name: John Doe
age: 30
email: john@example.com

Converts to:

{
  "name": "John Doe",
  "age": "30",
  "email": "john@example.com"
}

🤝 Contributing

Please read our Contributing Guide to learn how you can help make Format-X even better.

Quick contribution steps:

1. Fork the project
2. Create your feature branch (git switch -c feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

✨ Contributors

Thanks goes to these wonderful people:

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js - The React Framework for Production
• Tailwind CSS - A utility-first CSS framework
• Monaco Editor - The code editor that powers VS Code
• shadcn/ui - Beautifully designed components
• Lucide - Beautiful & consistent icons
• Vercel - Platform for deployment and hosting

👨‍💻 Author

Lucas Casco

• Website: lucasco.dev
• GitHub: @isaias-alt
• 🐦 or X (whatever the freak you wanna call it): @lucascodev

---

Made with ❤️ by Lucas Casco

If you found this project helpful, please consider giving it a ⭐!