Layout

Layout

marimo provides functions to help you lay out your output, such as in rows and columns, accordions, tabs, and callouts. ## Rows and columns

Arrange objects into rows and columns with mo.hstack and mo.vstack.
Combine mo.hstack with mo.vstack to make grids:
You can pass anything to mo.hstack to mo.vstack (including plots!).

Customization. The presentation of stacked elements can be customized with some arguments that are best understood by example.
1
2
3
4
1
2
3
4
 
def hstack(items: Sequence[object], justify: Literal['start', 'center',
  'end', 'space-between', 'space-around'] = 'space-between',
  align: Optional[Literal['start', 'end', 'center', 'stretch']] = None,
  wrap: bool = False, gap: float = 0.5, widths: Optional[Literal['equal'] |
  Sequence[float]] = None) -> Html:
Stack items horizontally, in a row. Combine with vstack to build a grid. Example. 
# Build a row of items
mo.hstack([mo.md("..."), mo.ui.text_area()])

# Build a grid.
mo.hstack(
    [
        mo.vstack([mo.md("..."), mo.ui.text_area()]),
        mo.vstack([mo.ui.checkbox(), mo.ui.text(), mo.ui.date()]),
    ]
)
Args.
  • items: A list of items.
  • justify: Justify items horizontally: start, center, end, space-between, or space-around.
  • align: Align items vertically: start, end, center, or stretch.
  • wrap: Wrap items or not.
  • gap: Gap between items as a float in rem. 1rem is 16px by default.
  • widths: "equal" to give items equal width; or a list of relative widths with same length as items, eg, [1, 2] means the second item is twice as wide as the first; or None for a sensible default
Returns.
  • An Html object.
def vstack(items: Sequence[object], align: Optional[Literal['start',
  'end', 'center', 'stretch']] = None, justify: Literal['start', 'center',
  'end', 'space-between', 'space-around'] = 'start', gap: float = 0.5,
  heights: Optional[Literal['equal'] | Sequence[float]] = None) -> Html:
Stack items vertically, in a column. Combine with hstack to build a grid of items. Example. 
# Build a column of items
mo.vstack([mo.md("..."), mo.ui.text_area()])

# Build a grid.
mo.vstack(
    [
        mo.hstack([mo.md("..."), mo.ui.text_area()]),
        mo.hstack([mo.ui.checkbox(), mo.ui.text(), mo.ui.date()]),
    ]
)
Args.
  • items: A list of items.
  • align: Align items horizontally: start, end, center, or stretch.
  • justify: Justify items vertically: start, center, end,
  • gap: Gap between items as a float in rem. 1rem is 16px by default.
  • heights: "equal" to give items equal height; or a list of relative heights with same length as items, eg, [1, 2] means the second item is twice as tall as the first; or None for a sensible default
Returns.
  • An Html object.

Justifying Html. While you can center or right-justify any object using mo.hstack, Html objects (returned by most marimo functions, and subclassed by most marimo classes) have a shortcut using via their center, right, and left methods. This markdown is left-justified.

This markdown is centered.
This markdown is right-justified.
 
def center(self) -> Html:
Center an item. Example. 
mo.md("# Hello, world").center()
Returns. An Html object.
def right(self) -> Html:
Right-justify. Example. 
mo.md("# Hello, world").right()
Returns. An Html object.
def left(self) -> Html:
Left-justify. Example. 
mo.md("# Hello, world").left()
Returns. An Html object.

Accordion

Create expandable shelves of content using mo.accordion: An accordion can contain multiple items:

By default, only one item can be open at a time
Use the keyword argument multiple=True to allow multiple items to be open at the same time

Tabs

Use mo.ui.tabs to display multiple objects in a single tabbed output:

Edit User
Edit Organization
 
class tabs(
    tabs: dict[str, object],
    value: Optional[str] = None,
    lazy: bool = False,
    label: str = "",
    on_change: Optional[Callable[[str], None]] = None
Display objects in a tabbed view. Examples. Show content in tabs: 
tab1 = mo.vstack([
    "slider": mo.ui.slider(1, 10),
    "text": mo.ui.text(),
    "date": mo.ui.date()
])
tab2 = mo.md("You can show arbitrary content in a tab.")
tabs = mo.ui.tabs({
    "Heading 1": tab1,
    "Heading 2": tab2
})
Control which tab is selected: 
tabs = mo.ui.tabs(
    {"Heading 1": tab1, "Heading 2": tab2}, value="Heading 2"
)
Tab content can be lazily loaded: 
tabs = mo.ui.tabs(
    {"Heading 1": tab1, "Heading 2": expensive_component}, lazy=True
)
Attributes.
  • value: A string, the name of the selected tab.
Initialization Args.
  • tabs: a dictionary of tab names to tab content; strings are interpreted as markdown
  • value: the name of the tab to open; defaults to the first tab
  • lazy: a boolean, whether to lazily load the tab content. This is a convenience that wraps each tab in a mo.lazy component.

Tree

Display a nested structure of lists, dictionaries, and tuples with mo.tree: 
def tree(items: list[Any] | tuple[Any] | dict[Any, Any],
  label: Optional[str] = None) -> Html:
Render a nested structure of lists, tuples, or dicts as a tree. Example. 
mo.tree(["entry", "another entry", {"key": [0, 1, 2]}], label="A tree.")
Args.
  • items: nested structure of lists, tuples, or dicts
  • label: optional text label for the tree
Returns. Html object

Callout

Turn any markdown or HTML into an emphasized callout with the callout method:

def callout(value: object, kind: Literal['neutral', 'warn', 'success',
  'info', 'danger'] = 'neutral') -> Html:
Build a callout output. Args.
  • value: A value to render in the callout
  • kind: The kind of callout (affects styling).
Returns.
  • An HTML object.
Back to top