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

# JSON

> Display JSON data in a prettified format

The JSON component displays JSON data with syntax highlighting and collapsible structure.

## Basic usage

```python theme={null}
import gradio as gr

def get_data():
    return {"name": "Alice", "age": 30, "city": "NYC"}

gr.Interface(
    fn=get_data,
    inputs=gr.Button("Get Data"),
    outputs=gr.JSON()
).launch()
```

## Constructor

<ParamField path="value" type="str | dict | list | Callable | None" default="None">
  Default JSON data as dict, list, or JSON string
</ParamField>

<ParamField path="open" type="bool" default="False">
  If True, all JSON nodes expanded by default
</ParamField>

<ParamField path="show_indices" type="bool" default="False">
  Whether to show numerical indices for list elements
</ParamField>

<ParamField path="height" type="int | str | None" default="None">
  Component height with scrolling if needed
</ParamField>

<ParamField path="buttons" type="list[Literal['copy'] | Button] | None" default="None">
  Buttons to show. Default is `["copy"]`
</ParamField>

## Events

* **change** - Triggered when JSON data changes

## Example

```python theme={null}
import gradio as gr

data = {
    "users": [
        {"name": "Alice", "age": 30},
        {"name": "Bob", "age": 25}
    ],
    "total": 2
}

gr.JSON(value=data, open=True, show_indices=True)
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.