john_helt•4w ago

differences between mo.ui.dictionary and python dict?

I find it unclear from the documentation, why I should use a marimo dictionary, and not just a python dict to hold UI elements. What is the fundamental difference, and when should you use one, and not the other, and vice verse?

Solution:

The main reason to use mo.ui.dictionary is for reactive execution — when you interact with an element in a mo.ui.dictionary, all cells that reference the mo.ui.dictionary run automatically, just like all other ui elements. When you use a regular dictionary, you don’t get this reactivity. This is the main reason to use mo.ui.dictionary.

Jump to solution

5 Replies

eugene•4w ago

The primary distinction between mo.ui.dictionary and a standard Python dictionary lies in how they handle UI elements. In mo.ui.dictionary, each UI element is a clone of the original, meaning interactions with elements in mo.ui.dictionary do not affect the original elements—and vice versa. As demonstrated in the video, interacting with the original UI elements updates the corresponding values in the Python dictionary, but not in mo.ui.dictionary. This allows you to reuse multiple UI components (e.g., sliders, text inputs, or date pickers) independently, ensuring they don’t interfere with each other when managed through mo.ui.dictionary. However, if you use a regular Python dictionary, all references remain synchronized, and changes to one element propagate across all linked instances. Additionally, mo.ui.dictionary makes it easy to apply convenient styling options. For example:

mo.ui.dictionary(
    {f"option {i}": mo.ui.slider(1, 10, show_value=True) for i in range(10)}
).vstack()  # Can also use .hstack(), .callout(), .center(), etc.

mo.ui.dictionary(
    {f"option {i}": mo.ui.slider(1, 10, show_value=True) for i in range(10)}
).vstack()  # Can also use .hstack(), .callout(), .center(), etc.

This structure enables quick, organized layouts like vertical or horizontal stacks, callouts, and centering, enhancing UI design without extra complexity.

john_heltOP•4w ago

thanks for the very detailed explanation. It makes sense. I guess it would be great info to add on the docs as well?

eugene•4w ago

I will add these to the docs

Solution

Akshay•3w ago

(Cloning is not the reason to use ui.dictionary; Python dictionaries can also be cloned.)