Skip to main content
The JsonTree component provides a beautiful, UX-focused way to display JSON data structures in your documentation. It uses badges, type indicators, and visual hierarchy for optimal readability, with type-specific colors and clean indentation.

​
Basic Usage

Import the component and pass it JSON data to display.
JsonTree usage
import { JsonTree } from "/snippets/tsdocs/JsonTree.jsx"

const userData = {
  name: "John Doe",
  age: 30,
  isActive: true,
  email: "[email protected]",
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  },
  hobbies: ["reading", "coding", "hiking"],
  metadata: null
};

<JsonTree data={userData} title="User Profile Data" />
Basic JsonTree Example
User Profile Data
name"John Doe"
age30
isActivetrue
addressobject
street"123 Main St"
city"New York"
country"USA"
hobbiesarray[3]
[0]"reading"
[1]"coding"
[2]"hiking"
metadatanull

​
Features

​
Visual Design

  • Type-specific colors: Strings (green), numbers (blue), booleans (orange), null (gray)
  • Badge-based property names: Consistent blue badges for all property names
  • Clean hierarchy: Borders and indentation for nested structures
  • Modern typography: Proper spacing and font choices
  • Dark mode support: Automatic theme adaptation

​
Data Type Support

  • Objects: Display with nested property structure
  • Arrays: Show length and individual elements
  • Primitives: Strings, numbers, booleans, null values
  • Mixed types: Handle complex nested structures

​
Enhanced Readability

  • String quotes: Properly formatted string values
  • Array length indicators: Show [n] for array types
  • Consistent spacing: Optimal padding and margins
  • Visual borders: Subtle left borders for nested items

​
Advanced Examples

​
API Response Example

Preview
undefined

​
Configuration Object Example

Preview
undefined

​
Mixed Data Types Example

Preview
undefined

​
Properties

​
data
any
required
The JSON data to display. Can be any valid JSON structure including objects, arrays, primitives, or nested combinations
​
title
string
Optional title displayed above the JSON structure
​
maxDepth
number
default:"5"
Maximum nesting depth to prevent excessive rendering with deeply nested structures

​
JsonTreeGroup

Use JsonTreeGroup to organize multiple related JSON structures:
Preview

​
Best Practices

Provide clear, contextual titles that explain what the JSON data represents.
// ✅ Good
<JsonTree title="User Profile API Response" data={userData} />

// ❌ Avoid
<JsonTree title="Data" data={userData} />
Use realistic, production-like data in examples to help users understand the actual structure and content.
// ✅ Good - Realistic API response
{
  id: 12345,
  email: "[email protected]",
  created_at: "2023-12-01T10:30:00Z",
  metadata: {
    last_login: "2023-12-01T09:15:00Z",
    preferences: { theme: "dark", notifications: true }
  }
}

// ❌ Avoid - Generic placeholder data
{
  field1: "value1",
  field2: "value2",
  nested: { key: "value" }
}
Include examples that demonstrate various data types (strings, numbers, booleans, null, arrays, objects) to showcase the component’s type-specific formatting.
<JsonTree
  title="Complete Type Example"
  data={{
    string: "Hello World",
    number: 42,
    boolean: true,
    null_value: null,
    array: [1, 2, 3],
    object: { nested: "value" }
  }}
/>
For very deeply nested JSON structures, consider setting an appropriate maxDepth to prevent overwhelming the reader, or break the structure into multiple examples.

​
Styling and Theming

JsonTree automatically adapts to Mintlify’s light and dark themes:
  • Property names: Consistent blue badges across themes
  • String values: Green text with proper quote formatting
  • Numbers: Blue text for numeric values
  • Booleans: Orange text for true/false values
  • Null values: Gray italic text
  • Borders: Subtle left borders for nested structures
  • Spacing: Consistent padding and margins
  • Typography: Monospace font for values, clean spacing

​
Comparison with Code Blocks

JsonTree is designed as a more readable alternative to raw JSON code blocks:

​
Troubleshooting

If you see Cannot find module "/snippets/JsonTree.jsx":
  1. Ensure JsonTree.jsx exists in your docs/snippets/ folder
  2. Run mint-tsdocs to auto-install the component
  3. Check that the import path is correct (should start with /snippets/)
If the JSON structure doesn’t display:
  1. Verify that the data prop contains valid JSON
  2. Check browser console for JavaScript errors
  3. Ensure the data is not undefined or null at the root level
If the component doesn’t look right:
  1. Ensure Tailwind CSS is properly loaded in your Mintlify site
  2. Check that you’re using an up-to-date version of the component
  3. Try refreshing the page to reload styles
If rendering is slow with large JSON structures:
  1. Consider setting a lower maxDepth value
  2. Break large structures into smaller, focused examples
  3. Use pagination or filtering for very large datasets

​
Version History

v2.0.0

Redesigned with beautiful formatting, type-specific colors, badge-based property names, and enhanced visual hierarchy

Future

  • Expandable/collapsible sections
  • Copy JSON functionality
  • Search and filtering
  • Custom color themes

FileTree

Display hierarchical file structures with visual icons

TypeTree

Display recursive type structures with expandable properties

Preview

Styled wrapper for component examples