Explore Deeply Nested JSON

Deeply nested JSON is one of the most common sources of confusion when working with CMS APIs, configuration systems, and analytics event schemas. When you're three or four levels deep in an object hierarchy, it's easy to lose track of what level you're at, make mistakes in JSONPath queries, or accidentally reference the wrong field. The tree viewer solves this by rendering each object and array as a collapsible node in a hierarchy you can navigate interactively. This example represents a CMS content tree — exactly the kind of structure returned by headless CMS platforms like Contentful, Sanity, or Strapi. The site object wraps a pages array, each page has a sections array, each section has a content object with typed fields. In a real CMS response, this can easily go six or seven levels deep with dozens of fields at each level. Why deep nesting happens in practice: CMS systems embed context at each level (which page? which section? which block?) to make each piece of data self-describing. Analytics platforms embed event context, session context, and user context in nested wrappers so each event carries everything needed for analysis without joining tables. Configuration systems nest environment-specific overrides inside feature blocks. Key use cases for the tree viewer: exploring an unfamiliar API response to understand its shape before writing parsing code, finding the exact JSONPath to a value you need (the viewer shows the full path to any node you click), collapsing irrelevant branches to focus on the section you're debugging, and counting array items at a glance without manually scrolling through a flat JSON string. JSONPath expressions for this example: $.site.pages[0].title extracts the first page title. $.site.pages[*].sections[*].type extracts all section types across all pages. $..heading extracts all heading values at any depth using the recursive descent operator. Tips: if performance is slow with very large JSON documents, collapse the top-level nodes first and expand only the branches you need. For JSON larger than a few megabytes, consider using a command-line tool like jq instead.

{
  "site": {
    "pages": [
      {
        "id": "home",
        "title": "Home",
        "sections": [
          {
            "type": "hero",
            "content": {
              "heading": "Welcome",
              "body": "Build faster with our tools.",
              "cta": { "label": "Get started", "href": "/tools" }
            }
          }
        ]
      }
    ]
  }
}