New to Gradio? Start here: Getting Started
See the Release History
To install Gradio from main, run the following command:
pip install https://gradio-builds.s3.amazonaws.com/d6f6f18bff72a33b3e2f135b309ec3fc4185c7bf/gradio-4.9.1-py3-none-any.whl*Note: Setting share=True in
launch() will not work.
Code 
gradio.Code(···)Description
Creates a Code editor for entering, editing or viewing code.
Behavior
As input: passes a str of code into the function.
As output: expects the function to return a str of code or a single-element tuple: (string_filepath,)
Initialization
| Parameter | Description |
|---|---|
value str | tuple[str] | None default: None | Default value to show in the code editor. If callable, the function will be called whenever the app loads to set the initial value of the component. |
language Literal[('python', 'markdown', 'json', 'html', 'css', 'javascript', 'typescript', 'yaml', 'dockerfile', 'shell', 'r')] | None default: None | The language to display the code as. Supported languages listed in |
every float | None default: None | If |
lines int default: 5 | |
label str | None default: None | The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a |
interactive bool | None default: None | Whether user should be able to enter code or only view it. |
show_label bool | None default: None | if True, will display label. |
container bool default: True | If True, will place the component in a container - providing some extra padding around the border. |
scale int | None default: None | relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. |
min_width int default: 160 | minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. |
visible bool default: True | If False, component will be hidden. |
elem_id str | None default: None | An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. |
elem_classes list[str] | str | None default: None | An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. |
render bool default: True | If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. |
Shortcuts
| Class | Interface String Shortcut | Initialization |
|---|---|---|
| "code" | Uses default values |
Event Listeners
Description
Event listeners allow you to capture and respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.
Supported Event Listeners
The Code component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Arguments table below.
| Listener | Description |
|---|---|
| ['python', 'markdown', 'json', 'html', 'css', 'javascript', 'typescript', 'yaml', 'dockerfile', 'shell', 'r', None] |
| Triggered when the value of the Code changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See |
| This listener is triggered when the user changes the value of the Code. |
| This listener is triggered when the Code is focused. |
| This listener is triggered when the Code is unfocused/blurred. |
Event Arguments
| Parameter | Description |
|---|