> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Json />

> A component for displaying JSON data, primarily used for debugging.

```js theme={"system"}
import {Json} from "attio/client"
```

The `<Json />` component renders JSON data in a formatted, readable way. It's primarily useful for debugging purposes when building apps, allowing you to quickly inspect the structure and contents of data objects.

## Example

```jsx theme={"system"}
<Json
  data={{
    name: "John Doe",
    email: "john@example.com",
    metadata: {
      lastSeen: "2025-11-05",
      preferences: ["email", "sms"],
    },
  }}
/>
```

## Props

<ParamField path="data" type="unknown" required>
  The data to be displayed as JSON. Can be any JavaScript value - objects, arrays, strings, numbers,
  booleans, or null.
</ParamField>