JsonViewer
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://x_X_x--019873051f3b73bea4659597f39bb671.web.val.run
A clean, interactive JSON viewer with syntax highlighting, collapsible tree view, and a tabbed interface for focused viewing.
- Tabbed Interface: Separate tabs for input and viewing for a distraction-free experience
- Interactive JSON Tree View: Collapsible nodes for easy navigation of complex JSON structures
- Syntax Highlighting: Color-coded JSON elements for better readability
- Multiple View Modes: Tree, code, text, and form views
- JSON Validation: Automatic validation and error reporting for invalid JSON
- Sample Data: Pre-loaded examples to demonstrate functionality
- Copy to Clipboard: One-click copying of formatted JSON
- Responsive Design: Works well on both desktop and mobile devices
- Expand/Collapse Controls: Quickly expand or collapse all nodes in the viewer
- Fullscreen Viewing: Dedicated view mode for focused JSON exploration
- Enter or paste your JSON in the input textarea
- Click "Format & Validate" to process and display the JSON
- Preview the JSON structure in the preview panel
- Click "Full View Mode" to switch to the dedicated viewing tab
- Explore the JSON structure in the fullscreen viewer
- Use the mode selector to switch between different view types (tree, code, text, form)
- Use "Expand All" or "Collapse All" buttons to control the tree view
- Click the "Copy JSON" button to copy the formatted JSON to clipboard
- Click "Back to Input" to return to the input tab for editing
The application includes several sample JSON structures to demonstrate different complexity levels:
- Simple Object: Basic key-value pairs
- Nested Object: Multi-level nested objects
- Array Example: JSON with arrays of objects
- Complex Example: A comprehensive example with various data types and structures
- JSONEditor library for the interactive viewer
- Tailwind CSS for styling
- Vanilla JavaScript for interactivity