🔄 Multi-Format Converter Hub

A powerful Flask-based web application for converting, validating, and editing configuration files with an interactive tree visualization interface.

✨ Features

Core Functionality

• Multi-Format Support: Convert between JSON, YAML, XML, TOML, and CSV
• Real-time Validation: Instant syntax checking and error detection
• Interactive Tree Editor: Visual hierarchy with drag-and-drop reorganization
• Batch Processing: Convert multiple files simultaneously
• Syntax Highlighting: Color-coded formatting for better readability
• File Upload/Download: Drag-and-drop or click to upload, one-click download

Advanced Features

• Tree Manipulation:
  • Drag nodes to reorder structure
  • Edit keys and values inline
  • Add/delete nodes
  • Copy/paste functionality
  • Keyboard shortcuts (Ctrl+C, Ctrl+V, Delete)
• Smart Conversion: Maintains data integrity during format changes
• Prettify/Minify: Format code for readability or compression
• Search: Find keys or values within the tree structure
• History: Undo/redo functionality (coming soon)

🚀 Quick Start

Prerequisites

• Python 3.8 or higher
• pip (Python package manager)

Installation

1. Clone the repository

git clone https://github.com/yourusername/format-converter-hub.git
cd format-converter-hub

2. Create a virtual environment

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies

pip install -r requirements.txt

4. Create project structure

format-converter-hub/
│
├── app.py                 # Main Flask application
├── requirements.txt       # Python dependencies
├── templates/
│   └── index.html        # HTML template (from artifact 1)
├── static/
│   ├── css/
│   │   └── styles.css    # Extract CSS from HTML
│   └── js/
│       └── tree-editor.js # Advanced tree editor module
└── README.md             # This file

5. Run the application

python app.py

6. Open in browser Navigate to http://localhost:5000

📖 Usage Guide

Basic Conversion

1. Paste or upload your configuration file in the input panel
2. Select input format (auto-detected for uploaded files)
3. Choose output format from the output panel
4. View converted result instantly in the output editor
5. Copy or download the converted file

Tree Editor

1. View hierarchy: See your configuration as an expandable tree
2. Edit inline: Click on any key or value to edit directly
3. Drag to reorder: Click and drag nodes to reorganize structure
4. Add nodes: Click ➕ button to add child nodes
5. Delete nodes: Click 🗑️ to remove nodes
6. Copy/Paste: Use 📋 and 📥 buttons or keyboard shortcuts

Batch Processing

1. Click "Batch Convert" button
2. Select multiple files to upload
3. Choose target format
4. Download all converted files as a ZIP

🎯 API Endpoints

Convert Format

POST /api/convert
Content-Type: application/json

{
  "input_format": "json",
  "output_format": "yaml",
  "content": "{ \"key\": \"value\" }",
  "prettify": true
}

Validate Format

POST /api/validate
Content-Type: application/json

{
  "format": "json",
  "content": "{ \"key\": \"value\" }"
}

Update from Tree

POST /api/tree/update
Content-Type: application/json

{
  "tree": [...],
  "format": "json"
}

Batch Convert

POST /api/batch
Content-Type: multipart/form-data

files: [file1, file2, ...]
output_format: "json"

🛠️ Configuration

Supported Formats

Format	Extensions	Features
JSON	.json	Full support, validation, prettify
YAML	.yaml, .yml	Full support, multi-document
XML	.xml	Full support, attributes, namespaces
TOML	.toml	Full support, sections, arrays
CSV	.csv	Basic support, flatten/unflatten

File Size Limits

• Maximum file size: 16MB
• Batch processing: Up to 50 files
• Tree visualization: Best for files under 1MB

🎨 Customization

Themes

Edit static/css/styles.css to customize colors:

:root {
  --primary: #6366f1;
  --secondary: #10b981;
  --dark: #1f2937;
  /* Add your colors */
}

Tree Editor Options

Configure in static/js/tree-editor.js:

const config = {
  maxDepth: 10,
  enableDragDrop: true,
  enableInlineEdit: true,
  enableKeyboardShortcuts: true
};

🔧 Development

Project Structure

app.py              # Flask routes and converters
├── FormatConverter # Conversion logic for all formats
├── TreeGenerator   # Tree structure generation
└── Routes          # API endpoints

static/
├── css/           # Stylesheets
└── js/            # JavaScript modules
    └── tree-editor.js  # Tree manipulation logic

templates/
└── index.html     # Main UI template

Adding New Formats

1. Add parser in FormatConverter class
2. Add converter method
3. Update UI format buttons
4. Add file extension to ALLOWED_EXTENSIONS

Testing

# Run tests
python -m pytest tests/

# With coverage
python -m pytest --cov=app tests/

📦 Deployment

Docker

FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["python", "app.py"]

Heroku

# Create Procfile
echo "web: gunicorn app:app" > Procfile

# Deploy
heroku create your-app-name
git push heroku main

Environment Variables

export FLASK_ENV=production
export SECRET_KEY=your-secret-key
export MAX_CONTENT_LENGTH=16777216

🐛 Troubleshooting

Common Issues

1. Import Error for yaml/toml

pip install PyYAML toml

2. CORS Issues

# In app.py
from flask_cors import CORS
CORS(app, origins="*")

3. Large File Handling

app.config['MAX_CONTENT_LENGTH'] = 32 * 1024 * 1024  # 32MB

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open Pull Request

📄 License

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

🙏 Acknowledgments

• Flask framework
• PyYAML for YAML processing
• TOML library for TOML support
• Tree visualization inspired by VS Code's file explorer

📞 Support

For issues, questions, or suggestions:

• Open an issue on GitHub
• Email: support@formatconverter.com
• Documentation: https://docs.formatconverter.com

---

Made with ❤️ by [Your Name]# Configuration_File_Visualizer