JSON

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

str | dict | list | Callable | None

default:"None"

Default JSON data as dict, list, or JSON string

bool

default:"False"

If True, all JSON nodes expanded by default

bool

default:"False"

Whether to show numerical indices for list elements

int | str | None

default:"None"

Component height with scrolling if needed

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)

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Basic usage

Constructor

Events

Example

​Basic usage

​Constructor

​Events

​Example

Basic usage

Constructor

Events

Example