Component | JSON Input

note

Introduced in SDK version 0.26.3

Render a JSON input with:

• Syntax highlighting and formatting for the input data
• Error checking to ensure well-formed JSON
• Line numbers for better readability

TypeScript / JavaScript

ui.jsonInput("user-data", {
    initialValue: { users: [ /* ... */ ] }, // Replace with actual JSON data.
    onEnter: (value) => db.updateUserMetadata(value)
})

Python

ui.json_input(
    "user-data",
    initial_value={ "users": [] }  # Replace with actual JSON data.
    on_enter=lambda value: db.update_user_metadata(value)
)

Learn more about working with inputs.

Change input height

You can change the height of the input element via the style property. For example, to render the input with a height of 800px:

TypeScript / JavaScript

ui.jsonInput("user-data", {
    style: { height: "800px" }
})

Python

ui.json_input(
    "user-data",
    style={"height": "800px"}
)

API reference

Function signature

TypeScript / JavaScript

type ValidJson =
| string
| number
| boolean
| null
| ValidJson[]
| { [key: string]: ValidJson };

ui.jsonInput(
    id: string,
    properties?: Partial<{
        label: string,
        description: string,
        required: boolean,
        initialValue: ValidJson,
        validate: (value: ValidJson) => string | void,
        onEnter: (value: ValidJson) => void,
        style: Style
    }>
)

Python

JsonPrimitive = Union[str, int, float, bool, None, Mapping[str, Any], List[Any]]
ValidJson = Union[Mapping[str, JsonPrimitive], List[JsonPrimitive], JsonPrimitive]

ui.json_input(
    id: str,
    *,
    label: str | None = None,
    description: str | None = None,
    required: bool = True,
    initial_value: ValidJson = None,
    validate: Callable[[ValidJson], str | None] | None = None,
    on_enter: Callable[[ValidJson], None] | None = None,
    style: Style | None = None
)

Parameters

TypeScript / JavaScript

id

required string

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

Python

id

required str

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

---

TypeScript / JavaScript

properties.label

optional string

The label to display above the JSON input. If not provided, the label will be inferred from the id.

Python

label

optional str

The label to display above the JSON input. If not provided, the label will be inferred from the id.

---

TypeScript / JavaScript

properties.description

optional string

A description to display between the label and JSON input.

Python

description

optional str

A description to display between the label and JSON input.

---

TypeScript / JavaScript

properties.required

optional boolean

Validate that the JSON input is not empty before submitting the form it's part of or calling it's onEnter hook. Defaults to true.

Python

required

optional bool

Validate that the JSON input is not empty before submitting the form it's part of or calling it's on_enter hook. Defaults to True.

---

TypeScript / JavaScript

properties.initialValue

optional ValidJson

The initial value of the JSON input. Defaults to null. You can also update the value of the JSON input at any time using the page.setInputs() method.

Python

initial_value

optional ValidJson

The initial value of the JSON input. Defaults to None. You can also update the value of the JSON input at any time using the page.set_inputs() method.

---

TypeScript / JavaScript

properties.validate

optional (value: ValidJson) => string | void

Validate the JSON input value before submitting it. If the function returns a string, it will be displayed as an error message.

Python

validate

optional Callable[[ValidJson], str | None]

Validate the JSON input value before submitting it. If the function returns a string, it will be displayed as an error message.

---

TypeScript / JavaScript

properties.onEnter

optional (value: ValidJson) => void

A callback function that is called when the user presses enter in the JSON input.

Python

on_enter

optional Callable[[ValidJson], None]

A callback function that is called when the user presses enter in the JSON input.

---

TypeScript / JavaScript

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---