A JSON Beautifier

So you are tired of formatting ugly JSON? Developers are sometimes forced to do it because they have to be able to read it. We have created our own beautifier. Why? Because developers are often tempted to copy/paste an ugly JSON into a free solution (web-page) on the internet that do formatting for free. Well, that represents a huge security risk. We created our own, running behind our own firewalls, based on a spec. See below.

Key Features:

1. User Inputs JSON:
   • A <textarea> field allows users to paste or type raw JSON.
2. Beautify JSON (beautifyJson function):
   • Uses JSON.parse() to parse the input.
   • Uses JSON.stringify() with indentation (null, 2) to format the JSON.
   • If the input is valid, the formatted JSON is displayed in another <textarea>.
   • Shows a temporary popup (popupVisible) for 3 seconds to indicate success.
   • If parsing fails, it displays "INVALID JSON. Please check your input."
3. Clear All (clearAll function):
   • Clears both input and output fields.
4. Select & Copy (selectAll function):
   • Selects the beautified JSON in the output <textarea>.
   • Copies it to the clipboard.
   • Shows an alert: "Beautified JSON copied to clipboard!"
5. Popup Notification:
   • Displays a floating success message (✅ VALID JSON!) when JSON is successfully beautified.
6. Styled Buttons:
   • Buttons have a gradient background and hover effects (scale animation).
7. Uses React Hooks:
   • useState for managing input, output, and popup visibility.
   • useRef to reference the output <textarea> for selection.
8. withRouter HOC:
   • Wraps the component with withRouter, likely for future navigation-related features.

Before formatting:

After formatting:

Finally: If you want a demo do not hesitate in contacting us. We are sure you can create one on your own. Also we know excellent people that are happy to help you on consultancy basis. They can bring our code to you and you can have the code customized if needed. After that the code is yours.