john_helt
john_helt2mo 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
eugene2mo 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_helt
john_heltOP2mo 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
eugene2mo ago
I will add these to the docs
Solution
Akshay
Akshay2mo ago
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.
Akshay
Akshay2mo ago
(Cloning is not the reason to use ui.dictionary; Python dictionaries can also be cloned.)