Explorador JSON

Exploring JSON as an Interactive Tree View

Large JSON payloads — API responses with nested objects, configuration exports, or database dumps — are nearly impossible to navigate as raw text. The JSON Explorer parses your JSON data and presents it as a collapsible tree structure where you can expand and collapse nodes, search by key or value, copy JSONPath expressions for any element, and see type and size metadata at each level. For very large payloads (thousands of nodes), virtual scrolling ensures the browser remains responsive regardless of document size.

Unlike a formatter that merely indents text, the explorer provides interactive navigation: click to expand nested objects, search to find specific keys buried deep in the structure, and hover to see the full JSONPath expression that addresses any node. This makes it ideal for understanding unfamiliar API response shapes, debugging deeply nested configuration, and extracting specific values from complex data structures. All processing uses Web Workers for large files to keep the UI responsive.

Tree Navigation and Node Interaction

The explorer renders JSON as a hierarchical tree with interactive controls:

• Expand/Collapse: Click any object or array node to reveal or hide its children
• Expand All/Collapse All: Global controls for opening or closing the entire tree
• Type indicators: Visual markers showing whether a value is a string, number, boolean, null, array, or object
• Size metadata: Arrays show element count, objects show property count, strings show character length
• Value preview: Collapsed nodes show a truncated preview of their content for quick scanning

For deeply nested structures, the tree preserves your expansion state — navigating elsewhere and returning keeps previously expanded paths open for continuity.

Search and JSONPath Copy

Finding specific data within large JSON structures requires search functionality beyond text matching:

• Key search: Find all nodes whose key name matches your query (exact or partial)
• Value search: Find nodes whose values contain your search text
• JSONPath copy: Click any node to copy its full JSONPath expression (e.g., $.users[0].address.city) for use in code or JSONPath testing tools
• Path breadcrumb: See the full path from root to the currently selected node

Search results highlight matching nodes in the tree and auto-expand their parent containers, making it easy to see the surrounding context of each match.

Virtual Scrolling for Large Documents

JSON documents with thousands of nodes can exhaust browser memory if fully rendered as DOM elements. The explorer uses virtual scrolling to maintain performance:

• Only visible nodes are rendered: Nodes outside the viewport exist only in memory, not as DOM elements
• Smooth scrolling: The scrollbar reflects the full document height while only materializing visible rows
• Web Worker parsing: Files larger than 100KB are parsed in a background worker to prevent UI freezing
• Progressive expansion: Expanding a node with thousands of children renders them incrementally

This architecture allows exploring multi-megabyte JSON files (API bulk exports, database dumps, telemetry data) without degrading browser performance or causing tab crashes.

Code Examples

Using JSONPath Expressions Extracted from Explorer

// JSONPath extracted from the explorer by clicking nodes:
// $.orders[0].items[2].product.name

// Using in JavaScript with a JSONPath library:
import { JSONPath } from 'jsonpath-plus';

const data = await fetch('/api/orders').then(r => r.json());

// Extract specific nested value
const productName = JSONPath({
  path: '$.orders[0].items[2].product.name',
  json: data
});

// Extract all product names across all orders
const allProducts = JSONPath({
  path: '$.orders[*].items[*].product.name',
  json: data
});

console.log('Specific product:', productName[0]);
console.log('All products:', allProducts);