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. Examples: Build a row of items: 
# Build a row of items
mo.hstack([mo.md("..."), mo.ui.text_area()])
Build a row of items with equal width: 
mo.hstack([mo.md("..."), mo.ui.text_area()], widths="equal")
Have one item stretch to fill the available space, while another fits its content: 
mo.hstack(
    [mo.plain_text("..."), mo.ui.text_area(full_width=True)],
    widths=[0, 1],
)
Build a grid: 
# 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 (Sequence[object]): A list of items. justify (Literal["start", "center", "end", "space-between", "space-around"]): Justify items horizontally: start, center, end, space-between, or space-around. Defaults to "space-between". align (Optional[Literal["start", "end", "center", "stretch"]]): Align items vertically: start, end, center, or stretch. wrap (bool): Wrap items or not. Defaults to False. gap (float): Gap between items as a float in rem. 1rem is 16px by default. Defaults to 0.5. widths (Optional[Literal["equal"] | Sequence[float]]): "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: Html: 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. Examples: Build a column of items: 
# Build a column of items
mo.vstack([mo.md("..."), mo.ui.text_area()])
Build a grid: 
# 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 (Sequence[object]): A list of items. align (Optional[Literal["start", "end", "center", "stretch"]]): Align items horizontally: start, end, center, or stretch. justify (Literal["start", "center", "end", "space-between", "space-around"]): Justify items vertically: start, center, end, space-between, or space-around. Defaults to "start". gap (float): Gap between items as a float in rem. 1rem is 16px by default. Defaults to 0.5. heights (Optional[Literal["equal"] | Sequence[float]]): "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: Html: 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([mo.ui.slider(1, 10), mo.ui.text(), 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 (str): The name of the selected tab. Args: tabs (dict[str, object]): A dictionary of tab names to tab content; strings are interpreted as markdown. value (str, optional): The name of the tab to open. Defaults to the first tab. lazy (bool, optional): Whether to lazily load the tab content. This is a convenience that wraps each tab in a mo.lazy component. Defaults to False. label (str, optional): A descriptive name for the tab. Defaults to "". on_change (Callable[[dict[str, object]], None], optional): Optional callback to run when this element's value changes.

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: 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: Html (marimo.Html): An HTML object.
Back to top