JSON Viewer Online Gids: Boomweergave, JSONPath, Zoeken en Grote Bestanden

Try our free JSON Viewer / Tree tool →

What Is a JSON Viewer and Why You Need One

A JSON viewer is a tool that parses raw JSON text and renders it as a structured, interactive display -- typically a collapsible tree. While JSON is human-readable by design, real-world JSON from APIs, databases, and configuration files is often deeply nested, minified into a single line, or spans thousands of lines. Reading such data in plain text is impractical.

A JSON viewer solves this by providing visual hierarchy (color-coded types, indentation, and expand/collapse controls), search and filter capabilities to locate specific keys or values, and path display showing the exact JSONPath to any selected node. These features turn JSON from an opaque wall of text into an explorable data structure.

Common scenarios where a JSON viewer is essential:

• API debugging: Inspecting REST or GraphQL responses to verify the response structure matches your expectations.
• Configuration files: Navigating complex configs for Kubernetes, Terraform, or application settings with hundreds of nested keys.
• Data analysis: Exploring JSON datasets exported from databases, analytics platforms, or third-party APIs.
• Troubleshooting: Finding a specific field buried deep in a large JSON payload during production debugging.
• Learning and documentation: Understanding the structure of an unfamiliar API by visually exploring its response format.

JSON Tree View vs Text View vs Table View

JSON viewers typically offer multiple display modes, each suited to different tasks. Understanding when to use each mode makes you more productive.

Tree View (Hierarchical)

The tree view renders JSON as a collapsible hierarchy, similar to a file explorer. Objects and arrays become expandable nodes, while primitive values (strings, numbers, booleans, null) are leaf nodes. Tree view is the default and most popular mode because it preserves the natural structure of JSON while letting you focus on specific branches.

Best for: exploring unfamiliar data structures, navigating deeply nested objects, understanding parent-child relationships, and copying JSONPath expressions for use in code.

Text View (Raw / Formatted)

The text view shows JSON as formatted (pretty-printed) plain text with syntax highlighting. This is the classic view offered by every JSON formatter. Text view is best when you need to see the raw data, copy entire sections, or make manual edits. Most text views support line numbers, bracket matching, and search within the text.

Best for: quick formatting of minified JSON, copying raw data, comparing small documents side by side, and editing JSON directly.

Table View (Tabular)

The table view renders JSON arrays of objects as rows and columns, similar to a spreadsheet. Each object becomes a row, and each unique key becomes a column header. This view is powerful when your JSON contains homogeneous data -- like a list of users, products, or log entries.

Best for: analyzing arrays of similar objects, sorting and filtering by column values, exporting to CSV, and comparing records across rows.

Navigating Large JSON Files: Search, Filter, and Collapse

When dealing with JSON files containing thousands or millions of nodes, efficient navigation is critical. Modern JSON viewers provide several features to help you find what you need quickly.

Search by Key or Value

The most basic navigation tool is full-text search. Enter a key name (like email) or a value (like admin) and the viewer highlights all matching nodes. Advanced viewers support regex search, case-sensitive matching, and filtering to show only matching nodes while hiding everything else.

Search tips for large JSON files:

• Search for key names first to understand the structure, then search for specific values.
• Use regex patterns to match partial values: user.*admin finds keys or values containing "user" followed by "admin".
• Filter mode (show only matches) is more useful than highlight mode for very large files.

Collapse and Expand Controls

Collapse and expand controls let you manage the visible depth of the tree. Common operations include:

• Collapse all: Reduces the entire tree to its top-level keys, giving you an overview of the structure.
• Expand to level N: Expands the tree to a specific depth (e.g., level 2 shows top-level objects and their immediate children).
• Expand this branch: Expands only the selected node and its children, keeping the rest collapsed.
• Toggle siblings: Expands or collapses all sibling nodes at the same level.

Path Display and Copy

When you click a node in the tree, the viewer displays the full JSONPath to that node. For example, clicking the "email" field of the second user in an array shows $.users[1].email. This path can be copied with a single click and used directly in code with JSONPath libraries or jq queries.

Try our free JSON Viewer / Tree tool →

JSONPath: Querying JSON Data

JSONPath is a query language for JSON, analogous to XPath for XML. It lets you extract specific values from a JSON document using dot notation and bracket expressions. While JSON viewers help you navigate visually, JSONPath lets you query programmatically.

Here are the most common JSONPath expressions:

See also: JSON Formatter

JSONPath is supported by libraries in every major language: jsonpath-ng (Python), jsonpath-plus (JavaScript/Node.js), JsonPath (Java by Jayway), and GJson (Go). Our JSON Viewer tool lets you test JSONPath expressions interactively and see the matched results.

// JSONPath usage examples with sample JSON
// Given this JSON document:
{
  "store": {
    "book": [
      { "category": "fiction", "author": "Orwell", "title": "1984", "price": 8.99 },
      { "category": "fiction", "author": "Tolkien", "title": "The Hobbit", "price": 12.99 },
      { "category": "science", "author": "Hawking", "title": "A Brief History", "price": 9.99 }
    ],
    "bicycle": {
      "color": "red",
      "price": 199.95
    }
  }
}

// JSONPath queries:
$.store.book[*].author       // ["Orwell", "Tolkien", "Hawking"]
$.store.book[0].title        // "1984"
$.store.book[?(@.price<10)]  // [{...1984}, {...Brief History}]
$..price                     // [8.99, 12.99, 9.99, 199.95]
$.store.book[-1:]            // [{...Brief History}] (last book)

JSON Viewer in Browser DevTools

Chrome, Firefox, Edge, and Safari all include built-in JSON viewers in their Developer Tools. These are often the fastest way to inspect JSON from API calls during development.

Chrome DevTools

In Chrome, open DevTools (F12 or Cmd+Option+I), go to the Network tab, click on an API request, and select the Preview subtab. Chrome renders JSON responses as a collapsible tree. You can also use the Console tab to format any JSON object:

// Chrome DevTools Console - useful JSON commands

// Pretty print any JavaScript object
console.log(JSON.stringify(myObject, null, 2));

// Copy formatted JSON to clipboard
copy(JSON.stringify(myObject, null, 2));

// Store a network response as a global variable:
// 1. Network tab > right-click response > "Store as global variable"
// 2. This creates temp1, temp2, etc. in Console
// 3. Explore: temp1.data.users[0]

// Parse JSON string in console
const data = JSON.parse('{"name":"test","count":42}');

// Filter object keys
Object.keys(data).filter(k => k.startsWith('user'));

// Get all values at a path
data.items?.map(item => item.name);

Chrome tips: right-click a node in the tree to copy the value, property name, or path. Use copy() in the Console to copy large objects to clipboard. You can also store a response as a global variable for further exploration.

Firefox DevTools

Firefox provides a dedicated JSON viewer that activates automatically when you navigate to a URL returning application/json. It offers tree view, raw data view, and a header panel. Firefox also includes a built-in JSONPath-like filter in the search bar of the JSON viewer.

Firefox tip: navigate directly to an API endpoint URL and Firefox renders the JSON response with its built-in viewer, no extensions needed.

JSON Viewer Extensions and Desktop Tools

While browser DevTools cover basic viewing, dedicated tools offer advanced features like JSONPath querying, schema validation, diff comparison, and handling of very large files.

jq -- The Command-Line JSON Processor

jq is the most widely used command-line tool for processing JSON. It can format, filter, transform, and query JSON data using a concise expression language. Install via brew install jq (macOS), apt install jq (Ubuntu), or choco install jq (Windows).

Common jq patterns for viewing JSON:

# Pretty print JSON (most basic use)
cat response.json | jq '.'

# Extract a specific field
cat response.json | jq '.data.users[0].name'

# Get all names from an array
cat response.json | jq '.users[].name'

# Filter array elements
cat response.json | jq '.users[] | select(.role == "admin")'

# Format API response inline
curl -s https://api.example.com/users | jq '.'

# Extract and reshape data
curl -s https://api.example.com/users | jq '[.[] | {name: .name, email: .email}]'

# Count array elements
cat response.json | jq '.users | length'

# Get unique values
cat response.json | jq '[.users[].department] | unique'

# Flatten nested arrays
cat response.json | jq '[.departments[].employees[]]'

fx -- Interactive JSON Viewer for Terminal

fx is an interactive JSON viewer for the terminal. Unlike jq, which outputs results and exits, fx provides a fully navigable tree in your terminal with expand/collapse, search, and JavaScript expression evaluation. Install via npm install -g fx or brew install fx.

# Interactive terminal JSON viewer
cat response.json | fx

# Apply JavaScript expression
cat response.json | fx '.users.map(u => u.name)'

# Pipe from curl
curl -s https://api.example.com/data | fx

# fx keybindings in interactive mode:
# Enter  - expand/collapse node
# e      - expand all
# E      - collapse all
# /      - search
# .      - show JSONPath of current node
# y      - copy current node to clipboard

gron -- Make JSON greppable

gron transforms JSON into discrete assignments, one per line, making it trivially greppable with standard Unix tools. This is incredibly useful when you know what value you are looking for but not where it lives in the structure.

# Transform JSON to greppable format
$ echo '{"name":"Alice","roles":["admin","user"],"address":{"city":"NYC"}}' | gron
json = {};
json.address = {};
json.address.city = "NYC";
json.name = "Alice";
json.roles = [];
json.roles[0] = "admin";
json.roles[1] = "user";

# Now grep for what you need
$ cat huge-response.json | gron | grep "email"
json.users[0].email = "alice@example.com";
json.users[1].email = "bob@example.com";
json.users[2].contacts.email = "charlie@example.com";

# Reverse gron output back to JSON
$ cat huge-response.json | gron | grep "email" | gron --ungron
{
  "users": [
    { "email": "alice@example.com" },
    { "email": "bob@example.com" },
    { "contacts": { "email": "charlie@example.com" } }
  ]
}

Working with API Responses (REST and GraphQL)

JSON viewers are indispensable when working with API responses. REST APIs return JSON by default, and GraphQL responses are always JSON. Here are practical workflows for inspecting API data.

Inspecting REST API Responses

The typical workflow is to make a request with curl or Postman, then pipe the response into a viewer. Our online JSON viewer accepts pasted JSON or fetched URLs:

# Fetch and view API response
curl -s https://api.example.com/users?page=1&limit=10 | jq '.'

# Check response structure
curl -s https://api.example.com/users | jq 'keys'
# Output: ["data", "meta", "pagination"]

# Inspect pagination metadata
curl -s https://api.example.com/users | jq '.pagination'
# Output: {"page": 1, "per_page": 10, "total": 342, "total_pages": 35}

# Extract specific fields from all items
curl -s https://api.example.com/users | jq '.data[] | {id, name, email}'

# Check for error responses
curl -s https://api.example.com/invalid | jq '.error // "No error field"'

# Save formatted response to file
curl -s https://api.example.com/users | jq '.' > users-formatted.json

When debugging REST APIs, pay attention to:

• Response structure: verify nested objects and arrays match your expected schema.
• Pagination metadata: check for next, previous, total, and page fields.
• Error responses: API errors often contain code, message, and details fields with debugging information.
• Null vs missing fields: null values and omitted keys have different semantics in most APIs.

Inspecting GraphQL Responses

GraphQL responses always follow the structure {"data": {...}, "errors": [...]}. The data field mirrors the query shape, making it predictable. Common inspection tasks include verifying that nested connections (edges/nodes) return the correct depth, checking for partial errors in the errors array, and validating that field aliases resolved correctly.

// Typical GraphQL response structure
{
  "data": {
    "users": {
      "edges": [
        {
          "node": {
            "id": "usr_001",
            "name": "Alice",
            "posts": {
              "totalCount": 42,
              "edges": [
                { "node": { "title": "Getting Started with GraphQL" } }
              ]
            }
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "YXJyYXljb25uZWN0aW9uOjE="
      }
    }
  },
  "errors": null
}

// Use jq to extract from GraphQL responses:
// All user names:
jq '.data.users.edges[].node.name'
// Post counts:
jq '.data.users.edges[].node | {name, posts: .posts.totalCount}'

Try our free JSON Viewer / Tree tool →

JSON Schema Validation While Viewing

JSON Schema defines the expected structure, types, and constraints of a JSON document. Combining a JSON viewer with schema validation lets you not only see the data but verify it conforms to your expectations.

A JSON Schema specifies which fields are required, what types they must be, allowed ranges for numbers, regex patterns for strings, and the structure of nested objects and arrays. When a viewer validates against a schema, it can highlight violations directly in the tree:

• Missing required fields are flagged with a warning icon or red highlight.
• Type mismatches (e.g., string where number expected) are underlined.
• Pattern violations (e.g., email not matching regex) show the expected pattern.
• Additional properties not defined in the schema can be highlighted as unexpected.

// JSON Schema example for a User object
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "required": ["id", "name", "email"],
  "properties": {
    "id": {
      "type": "integer",
      "minimum": 1
    },
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "role": {
      "type": "string",
      "enum": ["admin", "user", "viewer"]
    },
    "settings": {
      "type": "object",
      "properties": {
        "theme": { "type": "string", "enum": ["light", "dark"] },
        "notifications": { "type": "boolean" }
      }
    }
  },
  "additionalProperties": false
}

// Validate with ajv (JavaScript)
import Ajv from 'ajv';
const ajv = new Ajv();
const validate = ajv.compile(schema);
const valid = validate(data);
if (!valid) console.log(validate.errors);

Popular JSON Schema validation libraries include ajv (JavaScript, the fastest), jsonschema (Python), and json-schema-validator (Java). Our JSON viewer integrates with JSON Schema to provide real-time validation feedback as you explore the data.

Handling Large JSON Files

Standard JSON viewers load the entire document into memory, which works fine for files up to a few megabytes. But modern applications often produce JSON files that are 50 MB, 500 MB, or even several gigabytes. Handling these files requires different strategies.

Streaming Parsers

Instead of loading the entire file into memory, streaming (SAX-style) parsers process the JSON token by token. This keeps memory usage constant regardless of file size. Key streaming libraries:

• Python: ijson provides an iterator interface over JSON tokens. Use ijson.items(file, "users.item") to iterate over array elements without loading the full array.
• Node.js: JSONStream provides a streaming parser that emits events for matched paths. Pipe a readable stream through JSONStream.parse("users.*") to process each user object individually.
• Command line: jq --stream enables streaming mode, processing the file as a sequence of path-value pairs instead of loading it entirely.

# Python: Stream large JSON with ijson
import ijson

with open('huge-dataset.json', 'rb') as f:
    # Iterate over items in the "users" array without loading all into memory
    for user in ijson.items(f, 'users.item'):
        if user.get('role') == 'admin':
            print(user['name'], user['email'])

# Node.js: Stream with JSONStream
const JSONStream = require('JSONStream');
const fs = require('fs');

fs.createReadStream('huge-dataset.json')
  .pipe(JSONStream.parse('users.*'))
  .on('data', (user) => {
    if (user.role === 'admin') {
      console.log(user.name, user.email);
    }
  });

# Command line: jq streaming mode
jq --stream 'select(.[0][-1] == "email") | .[1]' huge-dataset.json

Lazy Loading in JSON Viewers

Web-based JSON viewers can implement lazy loading by only rendering visible nodes and fetching deeper levels on demand. This technique, similar to virtual scrolling in long lists, keeps the browser responsive even with millions of nodes.

When working with very large JSON in our online viewer: paste or upload the file, and the tree initially renders only the top-level nodes. Expanding a node fetches and renders only its immediate children, keeping DOM size manageable.

Performance Tips for Large JSON

• Use jq to pre-filter: extract only the section you need before loading into a viewer: jq ".data.results[:100]" huge-file.json > subset.json.
• Split large arrays: use jq -c ".[]" large-array.json to output one object per line (JSON Lines format) for processing with standard Unix tools.
• Use JSON Lines (JSONL): for datasets, store one JSON object per line. This allows line-by-line processing without parsing the entire file.
• Avoid browser viewers for files over 100 MB: use command-line tools (jq, fx, gron) which handle large files more efficiently than web-based viewers.

JSON Security: Sensitive Data and Tokens

JSON data from APIs and logs often contains sensitive information that should never be shared, logged, or exposed publicly. Being aware of these risks is critical when using online JSON viewers or sharing formatted JSON with colleagues.

• API tokens and keys: Authorization headers, API keys, and bearer tokens frequently appear in JSON responses or request logs. Never paste JSON containing tokens into public online tools.
• Session and refresh tokens: OAuth tokens, JWTs, and session identifiers in JSON responses can be used to impersonate users.
• Personally identifiable information (PII): names, email addresses, phone numbers, IP addresses, and physical addresses in API responses must be handled carefully.
• Database connection strings: configuration JSON files may contain database URLs with embedded credentials.
• Internal URLs and endpoints: JSON from internal APIs may expose internal service URLs, port numbers, and infrastructure details.

Best practices for safe JSON viewing:

• Use a local or offline JSON viewer for sensitive data -- our tool processes everything in your browser and never sends data to any server.
• Redact sensitive fields before sharing: replace token values with placeholder text like "[REDACTED]".
• Use jq to strip sensitive fields before sharing: jq "del(.auth, .tokens, .secrets)" response.json.
• Never commit raw API responses containing tokens to version control. Add *.json response dumps to your .gitignore.

# Redact sensitive fields before sharing JSON

# Remove specific keys with jq
cat response.json | jq 'del(.auth, .token, .session_id, .api_key)'

# Replace values while keeping structure
cat response.json | jq '
  .token = "[REDACTED]" |
  .users[].email = "[REDACTED]" |
  .database.password = "[REDACTED]"
'

# Redact all string values matching a pattern
cat response.json | jq '
  walk(if type == "string" and test("Bearer |sk-|eyJ") then "[REDACTED]" else . end)
'

# Strip sensitive headers from API response logs
cat api-log.json | jq '.request.headers |= del(.Authorization, .Cookie, ."X-API-Key")'

Frequently Asked Questions

What is the best online JSON viewer?

The best online JSON viewer provides an interactive tree view with collapse/expand, full-text search, JSONPath support, path copying, and syntax highlighting. It should process data locally in the browser for security and support large files without freezing. Our free DevToolBox JSON Viewer checks all these boxes and works instantly without registration.

How do I view a large JSON file without crashing the browser?

For files under 50 MB, paste them into a JSON viewer with lazy loading that only renders visible nodes. For larger files, use command-line tools like jq (for querying and filtering), fx (for interactive terminal browsing), or gron (for grep-friendly output). Pre-filter the JSON with jq to extract only the section you need before loading into a browser-based viewer.

What is the difference between a JSON viewer and a JSON formatter?

A JSON formatter takes minified or badly formatted JSON and adds proper indentation and line breaks (pretty-printing). A JSON viewer goes further by rendering the data as an interactive tree with collapse/expand, search, path display, and sometimes schema validation. Most JSON viewers include formatting as a baseline feature.

How do I use JSONPath to query JSON data?

JSONPath uses dot notation and bracket expressions to navigate JSON structures. The root is represented by $. Use dot notation for object keys ($.store.book), bracket notation for array indices ($[0]), and wildcards for all elements ($.store.book[*].author). Libraries like jsonpath-ng (Python) and jsonpath-plus (JavaScript) implement the full JSONPath specification.

Can I view JSON in Chrome without any extension?

Yes. Chrome DevTools (F12) shows JSON responses in a collapsible tree in the Network tab Preview panel. You can also type JSON.stringify(yourObject, null, 2) in the Console to format any JavaScript object. However, navigating directly to a JSON URL in Chrome shows raw text by default. For automatic formatting of JSON URLs, you need a browser extension.

Is it safe to paste sensitive JSON into an online viewer?

It depends on the tool. Our DevToolBox JSON Viewer processes everything locally in your browser using JavaScript and never transmits your data to any server. However, many online tools send data to their servers for processing. For sensitive data containing API tokens, credentials, or PII, always use a local or client-side-only viewer, or use command-line tools like jq.

What is jq and how does it compare to an online JSON viewer?

jq is a command-line JSON processor that can format, filter, transform, and query JSON using a concise expression language. It excels at scripting, automation, and handling very large files. An online JSON viewer provides a visual, interactive experience with point-and-click navigation. Use jq for automation and large files, and an online viewer for quick visual exploration and debugging.

How do I convert JSON tree view to a flat structure?

To flatten nested JSON into a flat key-value structure, use gron (which outputs path=value assignments), jq with path expressions (jq "[path(..)|strings] as $p | getpath($p) as $v | {($p|join(".")): $v}"), or JavaScript libraries like flat (npm: flat). Flattening is useful for search, comparison, and importing into spreadsheet or database formats.

A good JSON viewer transforms the experience of working with JSON data from frustrating text scrolling to intuitive visual exploration. Whether you use our online tool for quick debugging, Chrome DevTools for API development, or jq for command-line automation, mastering JSON viewing tools will save you significant time every day. Bookmark this guide and keep your JSON workflows efficient and secure.

View, explore, and navigate JSON data instantly with our free online tool. →