Code Editor

Source code for examples/ui/code_editor.py

Tip: paste this code into an empty cell, and the marimo editor will create cells for you

import marimo

__generated_with = "0.15.5"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo
    return (mo,)


@app.cell
def _(mo):
    initial_code = """# implement foo below
    def foo():
        ...
    """

    editor = mo.ui.code_editor(value=initial_code, language="python")
    editor
    return (editor,)


@app.cell
def _(editor):
    editor.value
    return


@app.cell
def _(mo):
    copy_editor = mo.ui.code_editor(
        value="let a = 'b';",
        language="javascript",
        show_copy_button=False,
    )
    copy_editor
    return


if __name__ == "__main__":
    app.run()

marimo.ui.code_editor

code_editor(value: str = '', language: str = 'python', placeholder: str = '', theme: Optional[Literal['light', 'dark']] = None, disabled: bool = False, min_height: Optional[int] = None, max_height: Optional[int] = None, show_copy_button: bool = True, debounce: bool | int = False, *, label: str = '', on_change: Optional[Callable[[str], None]] = None)

Bases: UIElement[str, str]

A code editor.

Examples:

code_editor = mo.ui.code_editor()

ATTRIBUTE	DESCRIPTION
value	A string of the code editor contents. TYPE: str

PARAMETER	DESCRIPTION
value	Initial value of the code editor. Defaults to "". TYPE: str DEFAULT: ''
language	Language of the code editor. Most major languages are supported, including "sql", "javascript", "typescript", "html", "css", "c", "cpp", "rust", and more. Defaults to "python". TYPE: str DEFAULT: 'python'
placeholder	Placeholder text to display when the code editor is empty. Defaults to "". TYPE: str DEFAULT: ''
theme	Theme of the code editor. Defaults to the editor's default. TYPE: Literal['light', 'dark'] DEFAULT: None
disabled	Whether the input is disabled. Defaults to False. TYPE: bool DEFAULT: False
min_height	Minimum height of the code editor in pixels. Defaults to None. TYPE: int DEFAULT: None
max_height	Maximum height of the code editor in pixels. Defaults to None. TYPE: int DEFAULT: None
label	Markdown label for the element. Defaults to "". TYPE: str DEFAULT: ''
on_change	Optional callback to run when this element's value changes. Defaults to None. TYPE: Callable[[str], None] DEFAULT: None
show_copy_button	Whether to show a button to copy the code to the clipboard. Defaults to True. TYPE: bool DEFAULT: True
debounce	Whether the input is debounced. If number, debounce by that many milliseconds. If True, then value is only emitted when the input loses focus. Defaults to False. TYPE: bool | int DEFAULT: False

text property

text: str

A string of HTML representing this element.

value property writable

value: T

The element's current value.

batch

batch(**elements: UIElement[JSONType, object]) -> batch

Convert an HTML object with templated text into a UI element.

This method lets you create custom UI elements that are represented by arbitrary HTML.

Example

user_info = mo.md(
    '''
    - What's your name?: {name}
    - When were you born?: {birthday}
    '''
).batch(name=mo.ui.text(), birthday=mo.ui.date())

In this example, user_info is a UI Element whose output is markdown and whose value is a dict with keys 'name' and 'birthday' (and values equal to the values of their corresponding elements).

PARAMETER	DESCRIPTION
elements	the UI elements to interpolate into the HTML template. TYPE: UIElement[JSONType, object] DEFAULT: {}

callout

callout(kind: Literal['neutral', 'danger', 'warn', 'success', 'info'] = 'neutral') -> Html

Create a callout containing this HTML element.

A callout wraps your HTML element in a raised box, emphasizing its importance. You can style the callout for different situations with the kind argument.

Examples:

mo.md("Hooray, you did it!").callout(kind="success")

mo.md("It's dangerous to go alone!").callout(kind="warn")

center

center() -> Html

Center an item.

Example

mo.md("# Hello, world").center()

RETURNS	DESCRIPTION
Html	An Html object.

form

form(label: str = '', *, bordered: bool = True, loading: bool = False, submit_button_label: str = 'Submit', submit_button_tooltip: Optional[str] = None, submit_button_disabled: bool = False, clear_on_submit: bool = False, show_clear_button: bool = False, clear_button_label: str = 'Clear', clear_button_tooltip: Optional[str] = None, validate: Optional[Callable[[Optional[JSONType]], Optional[str]]] = None, on_change: Optional[Callable[[Optional[T]], None]] = None) -> form[S, T]

Create a submittable form out of this UIElement.

Creates a form that gates submission of a UIElement's value until a submit button is clicked. The form's value is the value of the underlying element from the last submission.

Examples:

Convert any UIElement into a form:

prompt = mo.ui.text_area().form()

Combine with HTML.batch to create a form made out of multiple UIElements:

form = (
    mo.ui.md(
        '''
    **Enter your prompt.**

    {prompt}

    **Choose a random seed.**

    {seed}
    '''
    )
    .batch(
        prompt=mo.ui.text_area(),
        seed=mo.ui.number(),
    )
    .form()
)

PARAMETER	DESCRIPTION
label	A text label for the form. TYPE: str DEFAULT: ''
bordered	Whether the form should have a border. TYPE: bool DEFAULT: True
loading	Whether the form should be in a loading state. TYPE: bool DEFAULT: False
submit_button_label	The label of the submit button. TYPE: str DEFAULT: 'Submit'
submit_button_tooltip	The tooltip of the submit button. TYPE: Optional[str] DEFAULT: None
submit_button_disabled	Whether the submit button should be disabled. TYPE: bool DEFAULT: False
clear_on_submit	Whether the form should clear its contents after submitting. TYPE: bool DEFAULT: False
show_clear_button	Whether the form should show a clear button. TYPE: bool DEFAULT: False
clear_button_label	The label of the clear button. TYPE: str DEFAULT: 'Clear'
clear_button_tooltip	The tooltip of the clear button. TYPE: Optional[str] DEFAULT: None
validate	A function that takes the form's value and returns an error message if invalid, or None if valid. TYPE: Optional[Callable[[Optional[JSONType]], Optional[str]]] DEFAULT: None
on_change	Optional callback to run when this element's value changes. Defaults to None. TYPE: Optional[Callable[[Optional[T]], None]] DEFAULT: None

from_args classmethod

from_args(data: dict[str, int], args: InitializationArgs[S, T], memo: dict[int, Any] | None = None, basis: UIElement[S, T] | None = None) -> UIElement[S, T]

left

left() -> Html

Left-justify.

Example

mo.md("# Hello, world").left()

RETURNS	DESCRIPTION
Html	An Html object.

right

right() -> Html

Right-justify.

Example

mo.md("# Hello, world").right()

RETURNS	DESCRIPTION
Html	An Html object.

style

style(style: Optional[dict[str, Any]] = None, **kwargs: Any) -> Html

Wrap an object in a styled container.

Example

mo.md("...").style({"max-height": "300px", "overflow": "auto"})
mo.md("...").style(max_height="300px", overflow="auto")

PARAMETER	DESCRIPTION
style	an optional dict of CSS styles, keyed by property name TYPE: Optional[dict[str, Any]] DEFAULT: None
**kwargs	CSS styles as keyword arguments TYPE: Any DEFAULT: {}