ui.input_code_editor

ui.input_code_editor(
    id,
    label=None,
    value='',
    *,
    language='plain',
    height='auto',
    width='100%',
    theme_light='github-light',
    theme_dark='github-dark',
    read_only=False,
    line_numbers=None,
    word_wrap=None,
    tab_size=4,
    indentation='space',
    fill=True,
    **kwargs,
)

Create a code editor input.

Creates an interactive lightweight code editor input with syntax highlighting, line numbers, and other basic code editing features powered by Prism Code Editor.

The editor value is not sent to the server on every keystroke. Instead, updates are reflected on the server when the user moves away from the editor (blur) or when they press Ctrl/Cmd + Enter.

Parameters

id : str

An input ID.

label : TagChild = None

An optional label for the code editor.

value : str | Sequence[str] = ''

Initial code content. Can be a string or a sequence of strings (lines).

language : CodeEditorLanguage = 'plain'

Programming language for syntax highlighting. Supported languages include: "bash", "cpp", "css", "diff", "docker", "ini", "javascript", "json", "julia", "latex", "markdown", "markup", "python", "r", "rust", "sass", "scss", "sql", "toml", "typescript", "xml", "yaml", "md", "html", "plain", "plaintext", "text", "txt".

height : str = 'auto'

CSS height of the editor. Set to a specific value like "300px" for a fixed height, or "auto" to grow with content.

width : str = '100%'

CSS width of the editor.

theme_light : str = 'github-light'

Theme to use in light mode. Available themes include: “atom-one-dark”, “dracula”, “github-dark”, “github-dark-dimmed”, “github-light”, “night-owl”, “night-owl-light”, “prism”, “prism-okaidia”, “prism-solarized-light”, “prism-tomorrow”, “prism-twilight”, “vs-code-dark”, “vs-code-light”.

theme_dark : str = 'github-dark'

Theme to use in dark mode. The editor automatically switches between theme_light and theme_dark when used with input_dark_mode.

read_only : bool = False

Whether the editor should be read-only.

line_numbers : Optional[bool] = None

Whether to show line numbers. Defaults to True, except for "markdown" and "plain" languages where it defaults to False.

word_wrap : Optional[bool] = None

Whether to wrap long lines. Defaults to True when line_numbers is False, otherwise False.

tab_size : int = 4

Number of spaces per tab, defaults to 4.

indentation : CodeEditorIndentation = 'space'

Type of indentation: "space" or "tab".

fill : bool = True

Whether the code editor should fill its container. When True (the default), the editor participates in the fillable layout system.

****kwargs** : TagAttrValue = {}

Additional HTML attributes for the outer container element.

Returns

: Tag

A code editor input that can be added to a UI definition.

Notes

Server value

A string containing the current editor content.

Unlike text inputs that update on every keystroke, the code editor only sends its value to the server when the user presses Ctrl/Cmd + Enter or when the editor loses focus (blur event).

Keyboard Shortcuts

The editor supports the following keyboard shortcuts:

  • Ctrl/Cmd + Enter: Submit the current code to the server
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Shift + Z: Redo
  • Tab: Indent selection
  • Shift + Tab: Dedent selection

Themes

The editor automatically switches between theme_light and theme_dark when used with input_dark_mode.

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny import App, Inputs, Outputs, Session, render, ui

app_ui = ui.page_fillable(
    ui.layout_columns(
        ui.card(
            ui.card_header("Python Code Editor"),
            ui.input_code_editor(
                "code",
                label="Enter Python code:",
                value="def greet(name):\n    return f'Hello, {name}!'\n\nprint(greet('World'))",
                language="python",
                height="200px",
            ),
        ),
        ui.card(
            ui.card_header("Editor Value"),
            ui.output_text_verbatim("value", placeholder=True),
        ),
        col_widths=[6, 6],
    )
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.text
    def value():
        return input.code()


app = App(app_ui, server)