Skip to content

harsh98trivedi/JSON-Formatter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JSON Formatter web tool that formats, pretty-prints, and syntax highlights JSON data. The tool features a dark mode coder-themed UI, smooth animations, and responsive design that works seamlessly on all devices.

  • Paste or type JSON for instant formatting.
  • Pretty-printed and syntax-highlighted output for easy readability.
  • Copy to Clipboard functionality with user feedback.
  • Clear input and output with a single click.
  • Fully dark mode UI built with Tailwind CSS for a clean, modern coder vibe.
  • Responsive layout that fits from mobile screens to large desktops.
  • Minimal, accessible design with keyboard- and screen-reader-friendly elements.
  • Smooth animations powered by GSAP.
  • Clean, modern scrollbars for input/output panels.

🛠 Tech Stack

  • HTML5 & CSS3
  • Tailwind CSS (via CDN)
  • Fira Code font for JSON formatting
  • Inter font for UI components
  • Vanilla JavaScript for logic and interaction
  • GSAP for animations

💡 Usage

  1. Paste or type your unformatted JSON into the input box.
  2. Click Format JSON to pretty-print and highlight your JSON.
  3. Use the Copy Output button to copy formatted JSON to your clipboard.
  4. Click Clear to empty the input and output areas.

📜 License

This project is licensed under the MIT License.


🙌 Credits

UI inspired by clean, modern design and coding tools.
Built with ❤️ by Harsh Trivedi
Fonts from Google Fonts.
Powered by Tailwind CSS and GSAP.


Feel free to open issues or contribute to make this tool even better!