Skip to main content
The Code component provides a code editor with syntax highlighting for various programming languages.

​
Basic usage

import gradio as gr

def format_code(code):
    return code.strip()

gr.Interface(
    fn=format_code,
    inputs=gr.Code(language="python"),
    outputs=gr.Code(language="python")
).launch()

​
Constructor

​
value
str | Callable | None
default:"None"
Default code to display
​
language
str | None
default:"None"
Programming language for syntax highlighting. Options include:
  • “python”, “javascript”, “typescript”, “java”, “c”, “cpp”
  • “html”, “css”, “json”, “yaml”, “markdown”
  • “sql”, “r”, “shell”, “dockerfile”
See gr.Code.languages for full list
​
lines
int
default:"5"
Minimum number of visible lines
​
max_lines
int | None
default:"None"
Maximum number of visible lines. If None, fills container height
​
wrap_lines
bool
default:"False"
If True, wraps long lines to fit width
​
show_line_numbers
bool
default:"True"
Whether to display line numbers
​
autocomplete
bool
default:"False"
Whether to show autocomplete suggestions
​
interactive
bool | None
default:"None"
Whether code can be edited
​
buttons
list[Literal['copy', 'download'] | Button] | None
default:"None"
Buttons to show. By default, “copy” and “download” are shown

​
Events

  • change - Triggered when code changes
  • input - Triggered on keystroke
  • focus - Triggered when editor gains focus
  • blur - Triggered when editor loses focus

​
Examples

​
Python editor

import gradio as gr

initial_code = '''
def greet(name):
    return f"Hello, {name}!"

greet("World")
'''

gr.Code(
    value=initial_code,
    language="python",
    lines=10
)

​
JSON viewer

import gradio as gr

json_data = '''
{
  "name": "Alice",
  "age": 30,
  "skills": ["Python", "JavaScript"]
}
'''

gr.Code(
    value=json_data,
    language="json",
    interactive=False
)

​
SQL with autocomplete

import gradio as gr

gr.Code(
    language="sql",
    autocomplete=True,
    placeholder="SELECT * FROM users WHERE ..."
)