Ui

UI Elements

One of marimo’s most powerful features is its first-class support for interactive user interface (UI) elements: interacting with a UI element will automatically run cells that reference it. ## marimo.ui

The marimo.ui module has a library of pre-built elements. For example, here's a slider: and here's its value: 1.

How interactions run cells

Whenever you interact with a UI element, its value is sent back to Python. When this happens, all cells that reference the global variable bound to the UI element, but don’t define it, will run.

This simple rule lets you use UI elements to drive the execution of your program, letting you build interactive notebooks and tools for yourselves and others.

Interacting with a displayed UI element will only trigger reactive execution if the UI element is assigned to a global variable.

Every UI element has a value attribute that you can access in Python.

You can embed UI elements in markdown using f-strings. For example, we can render the slider here:

Simple elements

marimo has a large library of simple UI elements. Here are a just few examples:

1

False

''

''

'Click the run button!'

To see more examples, use this dropdown:

Composite elements

Composite elements are advanced elements
let you build UI elements out of other UI elements.

Use these powerful elements to logically group together related elements,
create a dynamic set of UI elements, or reduce the number of global
variables in your program.

This first example shows how to create an array of UI elements using mo.ui.array. When you interact with an element in the array, all cells that reference the array are reactively run. If you instead used a regular Python list, cells referring to the list would not be run.

marimo also comes with mo.ui.dictionary, which is analogous to mo.ui.array

To see additional composite elements, use this dropdown:

Building custom elements

marimo supports third-party UI elements through anywidget — this lets you build your own interactive UI elements, or use widgets built by others in the community. To learn more, see our docs. ## Appendix The remaining cells are helper data structures and functions. You can look at their code if you’re curious how certain parts of this tutorial were implemented.