🟢 Good First Issue: Add Bidirectional JSON <-> YAML Converter to Dev Utilities Sandbox

Time: ~40 minutes

Difficulty: Easy / Intermediate

Skill Level: First-time contributors welcome

Help expand the Dev Utilities Sandbox by creating a client-side JSON to YAML & YAML to JSON converter utility.

⭐ Before You Start

If you enjoy the project, please consider starring the repository. Every star helps support future development and encourages more open-source contributions.

📌 Description

Create a bidirectional, client-side converter that allows developers to paste JSON on one side and see YAML on the other in real-time, or vice versa, with detailed validation error messages.

🎯 Requirements

• Create a new JSON <-> YAML Converter utility page.
• Add the tool to the Dev Utilities dashboard.
• Register the required route.
• Split-Pane Layout:
  • Left Pane: JSON editor/textarea.
  • Right Pane: YAML editor/textarea.
• Real-time Sync & Conversion:
  • Modifying the JSON pane automatically parses and converts it to YAML in the right pane.
  • Modifying the YAML pane automatically parses and converts it to JSON in the left pane.
• Validation and Error Handling:
  • If the input in either pane is invalid syntax, display a clear, red/warning error message below the input showing the syntax error details (e.g., line number or parsing error), without breaking the page or resetting the other pane.
• Actions/Buttons:
  • Sample Data: Inserts a mock nested configuration payload (e.g., an app configuration file containing lists, maps, booleans, and numbers) into the active pane.
  • Format/Beautify: Beautifies the JSON payload formatting.
  • Copy: Quick clipboard copy buttons for each pane.
  • Clear: Clears both panes and resets validation errors.
• Implementation:
  • You may use a lightweight client-side YAML parsing/stringifying library like js-yaml (installable via npm).
• Follow the existing monochrome design system (soft glassmorphism/zinc borders, consistent buttons, responsive flex-grid layouts).
• Support both light and dark themes.

✅ Expected Result

Users should be able to:

• Access the JSON <-> YAML Converter from the Dev Utilities dashboard.
• Convert JSON to YAML and YAML to JSON seamlessly.
• See clear syntax error callouts if they write malformed code.
• Use the tool completely offline.

✅ Submission Requirements

1. ⭐ Star the repository.
2. 🍴 Fork the repository.
3. 🌿 Create a feature branch.
4. Build and test the JSON <-> YAML Converter.
5. Commit your changes.
6. Open a Pull Request linking this issue.

🚀 Quick Info

💡 Note

The JSON <-> YAML Converter should run completely client-side (no network requests), handle parsing errors gracefully, and follow the existing design guidelines and UI standards of the sandbox.