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.

Customization. The presentation of stacked elements can be customized with some arguments that are best understood by example.

def hstack(items: Sequence[object], justify: Literal['start', 'center',
  'end', 'space-between', 'space-around'] = 'space-between',
  align: Literal['start', 'end', 'center', 'stretch'] | None = None,
  wrap: bool = False, gap: float = 0.5, widths: Literal['equal'] |
  Sequence[float] | None = 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:
```python
mo.hstack([mo.md("..."), mo.ui.text_area()], widths="equal")
```
Have one item stretch to fill the available space,
while another fits its content:
```python
mo.hstack(
    [mo.plain_text("..."), mo.ui.text_area(full_width=True)],
    widths=[0, 1],
)
```
Build a grid:
```python
# 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: Literal['start', 'end',
  'center', 'stretch'] | None = None, justify: Literal['start', 'center',
  'end', 'space-between', 'space-around'] = 'start', gap: float = 0.5,
  heights: Literal['equal'] | Sequence[float] | None = 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:
```python
# 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.

```{=html}
<marimo-island
    data-app-id="main"
    data-cell-id="RGSE"
    data-reactive="true"
>
    <marimo-cell-output>
    <div style='display: flex;flex: 1;flex-direction: row;justify-content: center;align-items: normal;flex-wrap: nowrap;gap: 0.5rem'><span class="markdown prose dark:prose-invert contents"><span class="paragraph">This markdown is centered.</span></span></div>
    </marimo-cell-output>
    <marimo-cell-code hidden>mo.md(%22This%20markdown%20is%20centered.%22).center()</marimo-cell-code>
</marimo-island>

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: str | None = None, lazy: bool =
  False, label: str = '', on_change: Callable[[str], None] | 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:
```python
tabs = mo.ui.tabs(
    {"Heading 1": tab1, "Heading 2": tab2}, value="Heading 2"
)
```
Tab content can be lazily loaded:
```python
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.

def tree(items: list[Any] | tuple[Any] | dict[Any, Any], label: str | None
  = 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.