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
If True, all JSON nodes expanded by default
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)