JSON Breadcrumbs - Interactive JSON Viewer

Explore JSON data with breadcrumb paths, type information, and collapsible structures

JSON Input

{
  "user": {
    "id": 12345,
    "name": "John Doe",
    "email": "john.doe@example.com",
    "isActive": true,
    "profile": {
      "avatar": "https://example.com/avatar.jpg",
      "bio": "Software developer with 5+ years of experience",
      "location": {
        "city": "San Francisco",
        "state": "CA",
        "country": "USA",
        "coordinates": {
          "lat": 37.7749,
          "lng": -122.4194
        }
      },
      "skills": [
        "JavaScript",
        "React",
        "Node.js",
        "Python",
        "SQL"
      ],
      "experience": [
        {
          "company": "Tech Corp",
          "position": "Senior Developer",
          "duration": "2021-2024",
          "technologies": [
            "React",
            "TypeScript",
            "AWS"
          ]
        },
        {
          "company": "StartupXYZ",
          "position": "Full Stack Developer",
          "duration": "2019-2021",
          "technologies": [
            "Vue.js",
            "Node.js",
            "MongoDB"
          ]
        }
      ]
    },
    "preferences": {
      "theme": "dark",
      "notifications": {
        "email": true,
        "push": false,
        "sms": null
      },
      "privacy": {
        "profileVisible": true,
        "showEmail": false
      }
    },
    "metadata": {
      "createdAt": "2019-03-15T10:30:00Z",
      "lastLogin": "2024-01-15T14:22:33Z",
      "loginCount": 1247,
      "tags": [
        "premium",
        "developer",
        "early-adopter"
      ]
    }
  }
}

JSON Viewer

Object(1)

"user":object

Object(7)

"id":number

12345

"name":string

"John Doe"

"email":string

"john.doe@example.com"

"isActive":boolean

true

"profile":object

Object(5)

"preferences":object

Object(3)

"metadata":object

Object(4)

Features

Breadcrumb Paths

Click the copy icon next to any key to copy its full path (e.g., "user.profile.location.city")

Type Information

Each value displays its type with color-coded badges for easy identification

Collapsible Structure

Expand and collapse nested objects and arrays to focus on relevant data

Search & Navigate

Search through keys and values, then navigate between matches with arrow buttons