Explanation
HTML Structure:
<textarea>: The main input field where users can paste or type JSON-compatible key-value pairs.
Convert Button: Triggers the convertTextToJSON function to parse the input and render JSON.
<div id="jsonOutput">: Displays the formatted JSON structure with collapsible features.
CSS Styling:
Container & Colors: Light blue background, vibrant colours for buttons and borders.
Button Hover Effect: Changes button colour slightly on hover.
Responsive Design: Adjusts font sizes and layout for smaller screens.
JavaScript Function:
convertTextToJSON:
Parsing: Attempts to parse the user input as JSON. If successful, it renders the JSON with collapsible nodes using json-viewer-js.
Error Handling: If the JSON is invalid, an error message is displayed in red.
How to Use
Enter Text in JSON Format: Copy and paste or manually enter text in JSON format into the input field. An example format:
Click "Convert to JSON": This will attempt to parse the text and display the JSON structure.
View Output: If valid JSON, it appears in a collapsible, structured format below. If invalid, an error message will appear.
This tool is fully responsive and provides error feedback if the input text cannot be parsed as JSON.
{ "name": "John", "age": 30, "city": "New York" }