Skip to main content

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.

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

​
Basic usage

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

​
value
str | dict | list | Callable | None
default:"None"
Default JSON data as dict, list, or JSON string
​
open
bool
default:"False"
If True, all JSON nodes expanded by default
​
show_indices
bool
default:"False"
Whether to show numerical indices for list elements
​
height
int | str | None
default:"None"
Component height with scrolling if needed
​
buttons
list[Literal['copy'] | Button] | None
default:"None"
Buttons to show. Default is ["copy"]

​
Events

  • change - Triggered when JSON data changes

​
Example

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)

Build docs developers (and LLMs) love

Get started for freeTalk to us