JSON Formatter & Validator 🔧

A lightweight, browser-based JSON Formatter, Validator, and Editor built using Vanilla JavaScript, HTML, and CSS.
This tool helps developers quickly validate JSON, beautify it with custom indentation, edit values, and copy formatted output — without relying on external libraries.

---

🔗Live preview: view

🚀 Live Use Case

• Debug invalid JSON quickly
• Beautify minified or messy JSON
• Replace specific values inside JSON
• Validate API responses
• Prepare JSON for documentation or production use

---

🧠 How This Project Works (Logic Overview)

This project uses pure JavaScript with built-in browser APIs:

1️⃣ JSON Validation

• Uses JSON.parse() to check whether input JSON is valid
• If parsing fails, the error message is shown directly to the user
• If successful, JSON is returned in string form

JSON.parse(inputValue)

---

2️⃣ JSON Formatting (Beautifier)

• Converts valid JSON into readable format
• Uses JSON.stringify() with a dynamic indentation value selected by the user

JSON.stringify(jsonValue, null, tabs)

---

3️⃣ Value Editing (Replace Logic)

• Allows users to replace any value or key inside the JSON
• Internally uses replaceAll() on raw JSON text
• Useful for fast global replacements

inputValue.replaceAll(changeValue, needValue)

⚠️ Note: This is a text-based replace, not key-aware editing.

4️⃣ Clipboard Copy

• Uses the modern Clipboard API to copy formatted JSON

navigator.clipboard.writeText(output)

---

✨ Features

• ✅ JSON validation with error messages
• 🎨 JSON formatting with selectable indentation
• ✏️ Edit & replace values instantly
• 📋 One-click copy to clipboard
• ⚡ No dependencies, fast & lightweight
• 🌙 Modern developer-friendly UI

🛠️ Tech Stack

• HTML5 – Structure
• CSS3 – Styling & animations
• JavaScript (ES6+) – Logic
• Browser APIs – Clipboard, JSON
• No frameworks. No libraries. Pure performance.

📦 Project Structure

├── index.html
├── style.css
├── script.js
└── README.md

---

▶️ How to Use

1. Open the app in your browser
2. Paste JSON into Input JSON field
3. Choose indentation (2 / 3 / 4 spaces)
4. Click:
   • Validate JSON → to check errors
   • Format JSON → to beautify
5. (Optional) Edit values:
   • Enter existing value
   • Enter new value
   • Click Apply Change
6. Copy output using Copy Output button

---

⚠️ Limitations (Current)

• Value editing is string-based, not object-aware
• No syntax highlighting
• Error messages don’t show line numbers
• Large JSON files may slow down formatting

---

🔮 Future Improvements

Planned upgrades for next versions:

• 🧠 Key-aware JSON editing (object traversal)

• 🎨 Syntax highlighting (VS Code style)

• 📍 Error line & column detection

• 🌗 Dark / Light theme toggle

• 📂 Upload & download .json files

• 🔍 JSON search & collapse nodes

• 🧪 Schema validation support

📄 License

This project is open-source and free to use for learning and personal projects.