notebookView

%23%20Copyright%202026%20Marimo.%20All%20rights%20reserved.%0A%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.12%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22marimo%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.25.1%22%0Aapp%20%3D%20marimo.App()%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%20Layout%0A%0A%20%20%20%20%60marimo%60%20provides%20functions%20to%20help%20you%20lay%20out%20your%20output%2C%20such%20as%0A%20%20%20%20in%20rows%20and%20columns%2C%20accordions%2C%20tabs%2C%20and%20callouts.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Rows%20and%20columns%0A%0A%20%20%20%20Arrange%20objects%20into%20rows%20and%20columns%20with%20%60mo.hstack%60%20and%20%60mo.vstack%60.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5Bmo.ui.text(label%3D%22hello%22)%2C%20mo.ui.slider(1%2C%2010%2C%20label%3D%22slider%22)%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22start%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.vstack(%5Bmo.ui.text(label%3D%22world%22)%2C%20mo.ui.number(1%2C%2010%2C%20label%3D%22number%22)%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20grid%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Bmo.ui.text(label%3D%22hello%22)%2C%20mo.ui.slider(1%2C%2010%2C%20label%3D%22slider%22)%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Bmo.ui.text(label%3D%22world%22)%2C%20mo.ui.number(1%2C%2010%2C%20label%3D%22number%22)%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20).center()%0A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20Combine%20%60mo.hstack%60%20with%20%60mo.vstack%60%20to%20make%20grids%3A%0A%0A%20%20%20%20%20%20%20%20%7Bgrid%7D%0A%0A%20%20%20%20%20%20%20%20You%20can%20pass%20anything%20to%20%60mo.hstack%60%20to%20%60mo.vstack%60%20(including%0A%20%20%20%20%20%20%20%20plots!).%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20**Customization.**%0A%20%20%20%20The%20presentation%20of%20stacked%20elements%20can%20be%20customized%20with%20some%20arguments%0A%20%20%20%20that%20are%20best%20understood%20by%20example.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20justify%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22start%22%2C%20%22center%22%2C%20%22end%22%2C%20%22space-between%22%2C%20%22space-around%22%5D%2C%0A%20%20%20%20%20%20%20%20value%3D%22space-between%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22justify%22%2C%0A%20%20%20%20)%0A%20%20%20%20align%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22start%22%2C%20%22center%22%2C%20%22end%22%2C%20%22stretch%22%5D%2C%20value%3D%22center%22%2C%20label%3D%22align%22%0A%20%20%20%20)%0A%20%20%20%20gap%20%3D%20mo.ui.number(start%3D0%2C%20step%3D0.25%2C%20stop%3D2%2C%20value%3D0.5%2C%20label%3D%22gap%22)%0A%20%20%20%20wrap%20%3D%20mo.ui.checkbox(label%3D%22wrap%22)%0A%0A%20%20%20%20mo.hstack(%5Bjustify%2C%20align%2C%20gap%2C%20wrap%5D%2C%20justify%3D%22center%22)%0A%20%20%20%20return%20align%2C%20gap%2C%20justify%2C%20wrap%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20size%20%3D%20mo.ui.slider(label%3D%22box%20size%22%2C%20start%3D60%2C%20stop%3D500)%0A%20%20%20%20mo.hstack(%5Bsize%5D%2C%20justify%3D%22center%22)%0A%20%20%20%20return%20(size%2C)%0A%0A%0A%40app.cell%0Adef%20_(align%2C%20boxes%2C%20gap%2C%20justify%2C%20mo%2C%20wrap)%3A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20justify%3Djustify.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20%20%20%20%20wrap%3Dwrap.value%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(align%2C%20boxes%2C%20gap%2C%20mo)%3A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20size)%3A%0A%20%20%20%20def%20create_box(num%3D1)%3A%0A%20%20%20%20%20%20%20%20box_size%20%3D%20size.value%20%2B%20num%20*%2010%0A%20%20%20%20%20%20%20%20return%20mo.Html(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%3Cdiv%20style%3D'min-width%3A%20%7Bbox_size%7Dpx%3B%20min-height%3A%20%7Bbox_size%7Dpx%3B%20background-color%3A%20orange%3B%20text-align%3A%20center%3B%20line-height%3A%20%7Bbox_size%7Dpx'%3E%7Bstr(num)%7D%3C%2Fdiv%3E%22%0A%20%20%20%20%20%20%20%20)%0A%0A%0A%20%20%20%20boxes%20%3D%20%5Bcreate_box(i)%20for%20i%20in%20range(1%2C%205)%5D%0A%20%20%20%20return%20(boxes%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Documentation%3A%20%60mo.hstack%60%22%3A%20mo.doc(mo.hstack)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Documentation%3A%20%60mo.vstack%60%22%3A%20mo.doc(mo.vstack)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20**Justifying%20%60Html%60.**%20While%20you%20can%20center%20or%20right-justify%20any%20object%0A%20%20%20%20using%20%60mo.hstack%60%2C%20%60Html%60%20objects%20(returned%20by%20most%20marimo%0A%20%20%20%20functions%2C%20and%20subclassed%20by%20most%20marimo%20classes)%20have%20a%20shortcut%20using%0A%20%20%20%20via%20their%20%60center%60%2C%20%60right%60%2C%20and%20%60left%60%20methods.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20This%20markdown%20is%20left-justified.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22This%20markdown%20is%20centered.%22).center()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22This%20markdown%20is%20right-justified.%22).right()%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Documentation%3A%20%60Html.center%60%22%3A%20mo.doc(mo.Html.center)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Documentation%3A%20%60Html.right%60%22%3A%20mo.doc(mo.Html.right)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Documentation%3A%20%60Html.left%60%22%3A%20mo.doc(mo.Html.left)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Accordion%0A%0A%20%20%20%20Create%20expandable%20shelves%20of%20content%20using%20%60mo.accordion%60%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20An%20accordion%20can%20contain%20multiple%20items%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Multiple%20items%22%3A%20%22By%20default%2C%20only%20one%20item%20can%20be%20open%20at%20a%20time%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Allow%20multiple%20items%20to%20be%20open%22%3A%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Use%20the%20keyword%20argument%20%60multiple%3DTrue%60%20to%20allow%20multiple%20items%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%20be%20open%20at%20the%20same%20time%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Tabs%0A%0A%20%20%20%20Use%20%60mo.ui.tabs%60%20to%20display%20multiple%20objects%20in%20a%20single%20tabbed%20output%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20_settings%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22**Edit%20User**%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.text(label%3D%22First%20Name%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.text(label%3D%22Last%20Name%22)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%0A%20%20%20%20_organization%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22**Edit%20Organization**%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.text(label%3D%22Organization%20Name%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.number(label%3D%22Number%20of%20employees%22%2C%20start%3D0%2C%20stop%3D1000)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%0A%20%20%20%20mo.ui.tabs(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%F0%9F%A7%99%E2%80%8D%E2%99%80%20User%22%3A%20_settings%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%F0%9F%8F%A2%20Organization%22%3A%20_organization%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%7B%22Documentation%3A%20%60mo.ui.tabs%60%22%3A%20mo.doc(mo.ui.tabs)%7D)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20_t%20%3D%20%5B%0A%20%20%20%20%20%20%20%20mo.md(%22**Hello!**%22)%2C%0A%20%20%20%20%20%20%20%20mo.md(r%22%24f(x)%24%22)%2C%0A%20%20%20%20%20%20%20%20%7B%22c%22%3A%20mo.ui.slider(1%2C%2010)%2C%20%22d%22%3A%20(mo.ui.checkbox()%2C%20mo.ui.switch())%7D%2C%0A%20%20%20%20%5D%0A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Tree%0A%0A%20%20%20%20%20%20%20%20Display%20a%20nested%20structure%20of%20lists%2C%20dictionaries%2C%20and%20tuples%20with%0A%20%20%20%20%20%20%20%20%60mo.tree%60%3A%0A%0A%20%20%20%20%20%20%20%20%7Bmo.tree(_t)%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%7B%22Documentation%3A%20%60mo.tree%60%22%3A%20mo.doc(mo.tree)%7D)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Callout%0A%0A%20%20%20%20Turn%20any%20markdown%20or%20HTML%20into%20an%20emphasized%20callout%20with%20the%20%60callout%60%0A%20%20%20%20method%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20callout_kind%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22neutral%22%2C%20%22warn%22%2C%20%22success%22%2C%20%22info%22%2C%20%22danger%22%5D%2C%20value%3D%22neutral%22%0A%20%20%20%20)%0A%20%20%20%20return%20(callout_kind%2C)%0A%0A%0A%40app.cell%0Adef%20_(callout_kind%2C%20mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20You%20can%20turn%20any%20HTML%20or%20markdown%20into%20an%20emphasized%20callout.%0A%20%20%20%20%20%20%20%20You%20can%20choose%20from%20a%20variety%20of%20callout%20kinds.%20This%20one%20is%3A%0A%20%20%20%20%20%20%20%20%7Bcallout_kind%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20).callout(kind%3Dcallout_kind.value%2C%20title%3D%22This%20is%20a%20callout!%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.accordion(%7B%22Documentation%3A%20%60mo.callout%60%22%3A%20mo.doc(mo.callout)%7D)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20return%20(mo%2C)%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A