Skip to content
QuickTool logoQuickTool

JSON Viewer

Pretty‑print, validate, and explore JSON data with tree, table, and code views

Start

Description

The JSON Viewer formats and validates JSON so it is easier to read and debug. Paste raw or minified JSON into the input, and the tool will parse it and produce a clean, indented output that highlights structural issues immediately. If the input is not valid JSON, you will see an actionable error message with context about what went wrong, instead of a generic crash.

Choose between three view modes: Code for formatted text output, Tree for an interactive collapsible tree structure, or Table for a tabular view of JSON arrays. Upload JSON files directly, download formatted output, or paste from your clipboard — all processing happens locally in your browser for maximum privacy.

Key features

  • Three view modes: Code (formatted text), Tree (collapsible), and Table (for arrays)
  • Configurable indentation: 2 spaces, 4 spaces, or tabs
  • Optional alphabetical key sorting for easier scanning and comparison
  • Instant validation with detailed error messages and error context
  • File upload: load JSON files directly from your device
  • Download: save formatted JSON as a file
  • Two‑panel layout for side‑by‑side input and output
  • Mobile‑friendly tab switcher for smaller screens
  • Local persistence that restores your last input and settings

Common use cases

  • Debugging API responses from REST or GraphQL endpoints
  • Exploring nested data structures with the interactive tree view
  • Viewing JSON arrays as tables for easier data analysis
  • Cleaning up configuration files such as package.json or app settings
  • Preparing JSON payloads for API testing or documentation
  • Validating JSON files before committing to version control

Privacy & security: everything runs locally in your browser. Your JSON never leaves your device, which makes the tool safe for sensitive snippets like credentials or private configuration. No data is sent to any server, and your input is only stored in your browser's localStorage.

How to Use

  1. Open the tool. You can paste JSON, drag a file, or click “Upload File” to load JSON from your device.
  2. If there is a syntax error, an error panel appears with details about what went wrong and where.
  3. Once valid, the right panel shows your JSON in the selected view mode (Code, Tree, or Table).
  4. Use the view mode tabs (Code / Tree / Table) to switch between different visualizations.
  5. In Tree view, click on objects and arrays to expand or collapse them.
  6. Table view automatically displays JSON arrays of objects as a spreadsheet‑like table.
  7. Adjust indentation or enable key sorting using the settings above the panels.
  8. Use “Copy” to copy formatted JSON, or “Download” to save it as a file.
  9. Use “Minify” to collapse JSON to a single line for compact transmission.

Tips

  • Use Tree view to navigate deeply nested JSON structures — click to expand/collapse.
  • Use Table view when your JSON is an array of similar objects for easy comparison.
  • Enable “Sort keys” when comparing two JSON objects to make differences easier to spot.
  • Upload large JSON files instead of pasting to avoid clipboard size limits.
  • Working with Base64? Decode it first with Base64 Decoder and then paste the result here.

Troubleshooting

  • “Invalid JSON” → Ensure strings use double quotes and remove trailing commas. Check the error context shown in the error panel.
  • Table view shows error → Table view only works with arrays of objects, not nested arrays or primitives.
  • Large input feels slow → The tool debounces parsing for large inputs. Upload a file instead of pasting very large JSON.
  • Keys are in wrong order → By default, key order is preserved. Enable “Sort keys” if you want alphabetical ordering.
  • Tree view not expanding → Click on the row containing the object or array. The arrow icon indicates expandable items.

Example

Example 1: Tree View

Input:

{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}

Tree view output (click to expand/collapse):

▶ "users": [2]
  ▶ "0": {2}
    "id": 1
    "name": "Alice"
  ▶ "1": {2}
    "id": 2
    "name": "Bob"

Tree view lets you navigate nested structures visually, expanding only what you need.

Example 2: Table View

Input (array of objects):

[
  {"name": "Alice", "role": "admin", "active": true},
  {"name": "Bob", "role": "user", "active": false}
]

Table view renders this as:

#nameroleactive
1"Alice""admin"true
2"Bob""user"false

Table view is perfect for comparing objects in an array at a glance.

Example 3: Error Detection

Input (invalid — trailing comma):

{
  "status": "ok",
  "count": 42,
}

The error panel shows the exact location and suggests common fixes.

JSON does not allow trailing commas — remove the comma after 42 to fix.

FAQ

Does this tool run locally and is it safe for sensitive data?

Yes. All parsing and formatting happen entirely in your browser. No data is uploaded to any server, so it's safe for everyday snippets as well as sensitive configuration or credentials.

What is the difference between Code, Tree, and Table views?

Code shows formatted JSON text. Tree displays a collapsible tree for navigating nested structures. Table renders arrays of objects as a spreadsheet‑like table for easy comparison.

Why does Table view say it only works for arrays?

Table view needs a consistent column structure. It works best with JSON arrays where each element is an object with similar keys. Single objects or nested arrays cannot be displayed as a flat table.

Can I upload JSON files?

Yes. Click “Upload File” to load a JSON file from your device. This is useful for large files that may not fit on your clipboard.

How do I download the formatted JSON?

Click the “Download” button to save the formatted JSON as a .json file. The file will use your current indentation settings.

Can it handle large JSON files?

Yes, the tool is optimized for speed and handles large files well. Parsing is debounced to keep the UI responsive. Very large files (tens of MB) may take a few seconds to render in Tree or Table view.

Does the tool sort object keys?

By default, keys remain in their original order. Enable “Sort keys” to alphabetically sort keys at all levels of nested objects.

Can I minify JSON?

Yes. Click “Minify” to collapse your JSON to a single line by removing all whitespace. This is useful for preparing compact payloads.

Why am I seeing “Unexpected token” errors?

This usually means there's a syntax error. Common causes include missing quotes around keys, single quotes instead of double quotes, trailing commas, or mismatched brackets. Check the error context in the error panel.

Does the tool preserve my input?

Yes. Your input and settings are automatically saved in your browser's localStorage. They will be restored the next time you visit. Clear your browser data to reset.