├── LICENSE ├── README.md ├── __pycache__ └── marimo-cheat-sheet.cpython-39.pyc ├── images └── marimo_cheat_sheet_0_2_5.png └── marimo-cheat-sheet.py /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 vrtnis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # marimo cheat sheet 2 | 3 | A marimo app that includes a typed up summary of marimo docs 0.2.5 4 | 5 | 6 | ## Source: 7 | 8 | * [docs.marimo.io](https://docs.marimo.io) 9 | * **Always make sure to initially review https://docs.marimo.io** 10 | 11 | ## App author/layout/design 12 | * [@vrtnis](https://github.com/vrtnis/) 13 | * Inspired by the streamlit cheat sheet 14 | 15 | ## Versioning 16 | * Based on marimo 0.2.5 17 | 18 | 19 | ## Requirements 20 | marimo (pip install marimo) 21 | 22 | 23 | 24 | ## Screenshot 25 | ![marimo Cheat Sheet](images/marimo_cheat_sheet_0_2_5.png) 26 | 27 | --- 28 | 29 | 30 | 31 | ## Install and Import 32 | 33 | ``` 34 | # Install 35 | pip install marimo 36 | # Example Import Convention 37 | import marimo as mo 38 | # Open Tutorial 39 | marimo tutorial intro 40 | # List Tutorials 41 | marimo tutorial --help 42 | # Create new notebook 43 | marimo edit 44 | # Edit Notebook 45 | marimo edit your_notebook.py 46 | # Serve notebook as script 47 | python your_notebook.py 48 | # Serve notebook as app 49 | marimo run your_notebook.py 50 | # Convert Jupyter notebook 51 | marimo convert your_notebook.ipynb > your_notebook.py 52 | # Other marimo options 53 | marimo run [OPTIONS] NAME 54 | -p, --port INTEGER Port to attach to. 55 | --host TEXT Host to attach to. 56 | --headless Don't launch a browser. 57 | --include-code Include notebook code in the app. 58 | --base-url TEXT Base URL for the server. Should start with a /. 59 | --help Show this message and exit. 60 | # VSCode extension 61 | https://marketplace.visualstudio.com/items?itemName=marimo-team.vscode-marimo 62 | 63 | ``` 64 | 65 | ## Markdown 66 | 67 | ```python 68 | # Write markdown 69 | mo.md('Markdown text') 70 | # Interpolate Python values 71 | mo.md(f"Text: {mo.ui.text()}") 72 | # Embed plots 73 | mo.md(f"Plot: {mo.as_html('axis')}") 74 | # LaTeX support 75 | mo.md(r'$$e^{i\pi} + 1 = 0$$') 76 | # Display an icon 77 | mo.md(f"# {mo.icon('lucide:leaf')} Leaf") 78 | # Icon in a button 79 | mo.ui.button(label=f"{mo.icon('lucide:rocket')}") 80 | # Customized icon 81 | mo.icon('lucide:home', size=24, color='red') 82 | 83 | ``` 84 | 85 | ## Layout 86 | 87 | ```python 88 | # Accordion with multiple sections 89 | mo.accordion({"Section 1":mo.md("Content 1"),"Section 2":mo.md("Content 2")}) 90 | # Callout for highlighting information 91 | mo.callout("Important message",kind="info") 92 | # Center an item within its container 93 | mo.center(mo.md("Centered text")) 94 | # Horizontal stack of items 95 | mo.hstack([mo.md("Item 1"),mo.md("Item 2")]) 96 | # Left-justify an item 97 | mo.left(mo.md("Left-aligned text")) 98 | #Right-justify an item 99 | mo.right(mo.md("Right-aligned text")) 100 | # Render a tree from a nested data structure 101 | mo.tree({"Node 1":["Child 1","Child 2"],"Node 2":["Child 3"]}) 102 | # Vertical stack of items 103 | mo.vstack([mo.md("Top item"),mo.md("Bottom item")]) 104 | ``` 105 | 106 | 107 | ## Inputs 108 | 109 | ```python 110 | # Array of UI elements 111 | mo.ui.array([mo.ui.text(), mo.ui.date()]) 112 | # Convert HTML with templated text to UI element 113 | mo.ui.batch(mo.md('Example {value}'), {'value': mo.ui.text()}) 114 | # Button with optional callback 115 | mo.ui.button(label='Click me', on_click=lambda: print('Clicked')) 116 | # Boolean checkbox 117 | mo.ui.checkbox(label='Check me') 118 | # Code editor 119 | mo.ui.code_editor(language='python') 120 | # Transform DataFrame 121 | mo.ui.dataframe(df, on_change=lambda df: df.head()) 122 | # Explore DataFrame with visualizations 123 | mo.ui.data_explorer(df) 124 | # Date picker 125 | mo.ui.date() 126 | # Dictionary of UI elements 127 | mo.ui.dictionary({'text': mo.ui.text(), 'date': mo.ui.date()}) 128 | # Dropdown menu 129 | mo.ui.dropdown(options=['Option 1', 'Option 2']) 130 | # File upload 131 | mo.ui.file(filetypes=['.pdf', '.txt']) 132 | # Form linked to UIElement 133 | mo.ui.form(mo.ui.text()) 134 | # Audio recorder 135 | mo.ui.microphone() 136 | # Multiselect input 137 | mo.ui.multiselect(options=['Choice 1', 'Choice 2']) 138 | # Number picker 139 | mo.ui.number(start=0, stop=10) 140 | # Radio group 141 | mo.ui.radio(options=['Radio 1', 'Radio 2']) 142 | # Refresh button 143 | mo.ui.refresh() 144 | # Numeric slider 145 | mo.ui.slider(start=0, stop=100) 146 | # Boolean switch 147 | mo.ui.switch() 148 | # Tabbed view 149 | mo.ui.tabs({'Tab 1': mo.ui.text(), 'Tab 2': mo.ui.date()}) 150 | # Table component 151 | mo.ui.table(df) 152 | # Text input 153 | mo.ui.text() 154 | # Text area larger than text input 155 | mo.ui.text_area() 156 | 157 | ``` 158 | 159 | 160 | ## Plotting 161 | 162 | ```python 163 | # Create an Altair chart 164 | chart=alt.Chart(data.cars()).mark_point().encode(x='Horsepower',y='Miles_per_Gallon',color='Origin') 165 | mo.ui.altair_chart(chart,label="Car Data Exploration") 166 | # Create and make a Plotly plot reactive 167 | _plot=px.scatter(data_frame=data.cars(),x="Horsepower",y="Miles_per_Gallon",color="Origin") 168 | mo.ui.plotly(_plot,label="Interactive Car Data Plot") 169 | # Create a Matplotlib plot and render it interactively 170 | plt.plot([1,2,3],[4,5,6]) 171 | mo.mpl.interactive(plt.gcf()) 172 | 173 | ``` 174 | 175 | ## Media 176 | 177 | 178 | ```python 179 | # Render an image from a URL 180 | mo.image(src="https://example.com/image.png",alt="Image description",width=100,height=100) 181 | # Render an audio file from a URL 182 | mo.audio(src="https://example.com/audio.mp3") 183 | # Render a video from a URL with custom controls 184 | mo.video(src="https://example.com/video.mp4",controls=True,autoplay=False,loop=False,width=640,height=480) 185 | # Render a PDF from a URL 186 | mo.pdf(src="https://example.com/document.pdf",width='100%',height='500px') 187 | # Show a download button for downloadable content 188 | mo.download(data="https://example.com/file.zip",filename="example.zip",mimetype="application/zip") 189 | # Display plain text with spaces and newlines preserved 190 | mo.plain_text("Here is some preformatted text with spaces.") 191 | 192 | ``` 193 | 194 | 195 | ## Diagrams 196 | 197 | 198 | ```python 199 | # Define a Mermaid diagram 200 | mermaid_diagram = ''' 201 | graph LR 202 | A[Square Rect] -- Link text --> B((Circle)) 203 | ''' 204 | # Render the diagram in Marimo 205 | diagram_view = mo.mermaid(mermaid_diagram) 206 | 207 | # Displaying a simple statistic 208 | simple_stat = mo.stat(value="75%", label="Completion", 209 | caption="of the project is completed", direction="increase", bordered=True) 210 | ``` 211 | 212 | ## Status 213 | 214 | ```python 215 | # Display a progress bar 216 | progress_bar = mo.status.progress_bar(range(100), title="Processing", subtitle="Please wait...", 217 | completion_title="Done", show_rate=True, show_eta=True) 218 | 219 | # Show a spinner while loading or processing 220 | with mo.status.spinner(title="Loading", subtitle="Fetching data"): 221 | # Simulate a long-running process 222 | time.sleep(5) 223 | 224 | ``` 225 | 226 | 227 | ## Outputs 228 | 229 | ```python 230 | 231 | # Replace a cell's output 232 | mo.output.replace("New cell output") 233 | # Append to a cell's output 234 | mo.output.append("Additional cell output") 235 | # Clear a cell's output 236 | mo.output.clear() 237 | # Redirect stdout to cell's output area 238 | with mo.redirect_stdout(): 239 | print("Stdout is redirected to cell output") 240 | # Redirect stderr to cell's output area 241 | with mo.redirect_stderr(): 242 | print("Stderr is redirected to cell output", file=sys.stderr) 243 | # Capture stdout into a variable 244 | with mo.capture_stdout() as captured: 245 | print("Capturing stdout") 246 | captured_stdout = captured.getvalue() 247 | # Capture stderr into a variable 248 | with mo.capture_stderr() as captured: 249 | print("Capturing stderr", file=sys.stderr) 250 | captured_stderr = captured.getvalue() 251 | 252 | ``` 253 | 254 | ## HTML 255 | 256 | 257 | ```python 258 | # Convert an object to HTML 259 | plot_html = mo.as_html(plt.figure()) 260 | # Create an Html object directly 261 | html_obj = mo.Html("

Hello, Marimo!

") 262 | # Accessing the text of an Html object 263 | html_text = html_obj.text 264 | # Convert Html object with templated text into a batched UI element 265 | batched_ui = html_obj.batch(name=mo.ui.text(), date=mo.ui.date()) 266 | # Center an item using Html method 267 | centered_html = html_obj.center() 268 | # Right-justify an item using Html method 269 | right_justified_html = html_obj.right() 270 | # Left-justify an item using Html method 271 | left_justified_html = html_obj.left() 272 | # Create a callout containing an Html element 273 | callout_html = html_obj.callout(kind='info') 274 | # Apply custom CSS styles to an Html object 275 | styled_html = html_obj.style({'color': 'red', 'font-weight': 'bold'}) 276 | 277 | ``` 278 | 279 | 280 | ## Control Flow 281 | 282 | 283 | ```python 284 | # Stops execution of a cell when predicate is True 285 | mo.stop(form.value is None, mo.md("**Submit the form to continue.**")) 286 | # Prevent accidental capture with except Exception 287 | try: 288 | mo.stop("This will stop the cell execution") 289 | except MarimoStopError as e: 290 | # Handle the stop error, perhaps logging or taking alternative actions 291 | print("Caught a MarimoStopError") 292 | # Use refresh to auto-refresh descendants at a given interval 293 | mo.ui.refresh(options=["1s", "5s"], default_interval="1s", 294 | label="Auto-refresh rate") 295 | ``` 296 | 297 | ## State 298 | 299 | ```python 300 | # Create state 301 | get_count, set_count = mo.state(0) 302 | # Read the value 303 | current_count = get_count() 304 | # Update the state 305 | set_count(1) 306 | # Update the state based on the current value 307 | set_count(lambda value: value + 1) 308 | # Synchronizing multiple UI elements 309 | get_state, set_state = mo.state(0) 310 | # Updating the state through the slider will recreate the number (below) 311 | slider = mo.ui.slider(0, 100, value=get_state(), on_change=set_state) 312 | # Updating the state through the number will recreate the slider (above) 313 | number = mo.ui.number(0, 100, value=get_state(), on_change=set_state) 314 | # Slider and number are synchronized to have the same value 315 | [slider, number] 316 | 317 | ``` 318 | 319 | ## Debug 320 | 321 | 322 | ```python 323 | # Getting the definitions of the currently executing cell 324 | cell_defs = mo.defs() 325 | # Getting the references of the currently executing cell 326 | cell_refs = mo.refs() 327 | 328 | ``` 329 | 330 | 331 | ### Marimo Docs 332 | [Docs](https://docs.marimo.io)
333 | 334 | 335 | --- 336 | -------------------------------------------------------------------------------- /__pycache__/marimo-cheat-sheet.cpython-39.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vrtnis/marimo-cheat-sheet/b8406a81c913b2d821d49f352123a692a42ea9dd/__pycache__/marimo-cheat-sheet.cpython-39.pyc -------------------------------------------------------------------------------- /images/marimo_cheat_sheet_0_2_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vrtnis/marimo-cheat-sheet/b8406a81c913b2d821d49f352123a692a42ea9dd/images/marimo_cheat_sheet_0_2_5.png -------------------------------------------------------------------------------- /marimo-cheat-sheet.py: -------------------------------------------------------------------------------- 1 | import marimo 2 | 3 | 4 | 5 | __generated_with = "0.2.5" 6 | app = marimo.App(width="full") 7 | 8 | 9 | @app.cell 10 | def __(mo): 11 | 12 | mo.md("## **marimo** cheat sheet 0.2.5") 13 | 14 | return 15 | 16 | 17 | 18 | 19 | 20 | 21 | @app.cell 22 | def __(mo): 23 | # Building the grid 24 | mo.hstack([ 25 | mo.vstack([ 26 | 27 | 28 | mo.md(f"## {mo.icon('lucide:download')} Install and Import"), 29 | mo.md(""" 30 | 31 | ```python 32 | # Install 33 | pip install marimo 34 | # Example Import Convention 35 | import marimo as mo 36 | # Open Tutorial 37 | marimo tutorial intro 38 | # List Tutorials 39 | marimo tutorial --help 40 | # Create new notebook 41 | marimo edit 42 | # Edit Notebook 43 | marimo edit your_notebook.py 44 | # Serve notebook as script 45 | python your_notebook.py 46 | # Serve notebook as app 47 | marimo run your_notebook.py 48 | # Convert Jupyter notebook 49 | marimo convert your_notebook.ipynb > your_notebook.py 50 | # Other marimo options 51 | marimo run [OPTIONS] NAME 52 | -p, --port INTEGER Port to attach to. 53 | --host TEXT Host to attach to. 54 | --headless Don't launch a browser. 55 | --include-code Include notebook code in the app. 56 | --base-url TEXT Base URL for the server. Should start with a /. 57 | --help Show this message and exit. 58 | # VSCode extension 59 | https://marketplace.visualstudio.com/items?itemName=marimo-team.vscode-marimo 60 | 61 | 62 | 63 | ``` 64 | """), 65 | mo.md(f"## {mo.icon('lucide:arrow-down-square')} Markdown"), 66 | mo.md(""" 67 | 68 | ```python 69 | # Write markdown 70 | mo.md('Markdown text') 71 | # Interpolate Python values 72 | mo.md(f"Text: {mo.ui.text()}") 73 | # Embed plots 74 | mo.md(f"Plot: {mo.as_html('axis')}") 75 | # LaTeX support 76 | mo.md(r'$$e^{i\pi} + 1 = 0$$') 77 | # Display an icon 78 | mo.md(f"# {mo.icon('lucide:leaf')} Leaf") 79 | # Icon in a button 80 | mo.ui.button(label=f"{mo.icon('lucide:rocket')}") 81 | # Customized icon 82 | mo.icon('lucide:home', size=24, color='red') 83 | ``` 84 | """), 85 | mo.md(f"## {mo.icon('lucide:layout-dashboard')} Layout"), 86 | 87 | 88 | mo.md(""" 89 | 90 | 91 | ```python 92 | # Accordion with multiple sections 93 | mo.accordion({"Section 1":mo.md("Content 1"),"Section 2":mo.md("Content 2")}) 94 | # Callout for highlighting information 95 | mo.callout("Important message",kind="info") 96 | # Center an item within its container 97 | mo.center(mo.md("Centered text")) 98 | # Horizontal stack of items 99 | mo.hstack([mo.md("Item 1"),mo.md("Item 2")]) 100 | # Left-justify an item 101 | mo.left(mo.md("Left-aligned text")) 102 | #Right-justify an item 103 | mo.right(mo.md("Right-aligned text")) 104 | # Render a tree from a nested data structure 105 | mo.tree({"Node 1":["Child 1","Child 2"],"Node 2":["Child 3"]}) 106 | # Vertical stack of items 107 | mo.vstack([mo.md("Top item"),mo.md("Bottom item")]) 108 | ``` 109 | """) 110 | ]), 111 | 112 | mo.vstack([ 113 | 114 | 115 | mo.md(f"## {mo.icon('lucide:keyboard')} Inputs"), 116 | mo.md(""" 117 | 118 | ```python 119 | # Array of UI elements 120 | mo.ui.array([mo.ui.text(), mo.ui.date()]) 121 | # Convert HTML with templated text to UI element 122 | mo.ui.batch(mo.md('Example {value}'), {'value': mo.ui.text()}) 123 | # Button with optional callback 124 | mo.ui.button(label='Click me', on_click=lambda: print('Clicked')) 125 | # Boolean checkbox 126 | mo.ui.checkbox(label='Check me') 127 | # Code editor 128 | mo.ui.code_editor(language='python') 129 | # Transform DataFrame 130 | mo.ui.dataframe(df, on_change=lambda df: df.head()) 131 | # Explore DataFrame with visualizations 132 | mo.ui.data_explorer(df) 133 | # Date picker 134 | mo.ui.date() 135 | # Dictionary of UI elements 136 | mo.ui.dictionary({'text': mo.ui.text(), 'date': mo.ui.date()}) 137 | # Dropdown menu 138 | mo.ui.dropdown(options=['Option 1', 'Option 2']) 139 | # File upload 140 | mo.ui.file(filetypes=['.pdf', '.txt']) 141 | # Form linked to UIElement 142 | mo.ui.form(mo.ui.text()) 143 | # Audio recorder 144 | mo.ui.microphone() 145 | # Multiselect input 146 | mo.ui.multiselect(options=['Choice 1', 'Choice 2']) 147 | # Number picker 148 | mo.ui.number(start=0, stop=10) 149 | # Radio group 150 | mo.ui.radio(options=['Radio 1', 'Radio 2']) 151 | # Refresh button 152 | mo.ui.refresh() 153 | # Numeric slider 154 | mo.ui.slider(start=0, stop=100) 155 | # Boolean switch 156 | mo.ui.switch() 157 | # Tabbed view 158 | mo.ui.tabs({'Tab 1': mo.ui.text(), 'Tab 2': mo.ui.date()}) 159 | # Table component 160 | mo.ui.table(df) 161 | # Text input 162 | mo.ui.text() 163 | # Text area larger than text input 164 | mo.ui.text_area() 165 | 166 | ``` 167 | """) 168 | ]), 169 | 170 | 171 | mo.vstack([ 172 | 173 | 174 | mo.md(f"## {mo.icon('lucide:scatter-chart')} Plotting"), 175 | 176 | mo.md(""" 177 | 178 | 179 | ```python 180 | # Create an Altair chart 181 | chart=alt.Chart(data.cars()).mark_point().encode(x='Horsepower',y='Miles_per_Gallon',color='Origin') 182 | mo.ui.altair_chart(chart,label="Car Data Exploration") 183 | # Create and make a Plotly plot reactive 184 | _plot=px.scatter(data_frame=data.cars(),x="Horsepower",y="Miles_per_Gallon",color="Origin") 185 | mo.ui.plotly(_plot,label="Interactive Car Data Plot") 186 | # Create a Matplotlib plot and render it interactively 187 | plt.plot([1,2,3],[4,5,6]) 188 | mo.mpl.interactive(plt.gcf()) 189 | 190 | ``` 191 | """), 192 | mo.md(f"## {mo.icon('lucide:play-square')} Media"), 193 | 194 | mo.md(""" 195 | 196 | ```python 197 | # Render an image from a URL 198 | mo.image(src="https://example.com/image.png",alt="Image description",width=100,height=100) 199 | # Render an audio file from a URL 200 | mo.audio(src="https://example.com/audio.mp3") 201 | # Render a video from a URL with custom controls 202 | mo.video(src="https://example.com/video.mp4",controls=True,autoplay=False,loop=False,width=640,height=480) 203 | # Render a PDF from a URL 204 | mo.pdf(src="https://example.com/document.pdf",width='100%',height='500px') 205 | # Show a download button for downloadable content 206 | mo.download(data="https://example.com/file.zip",filename="example.zip",mimetype="application/zip") 207 | # Display plain text with spaces and newlines preserved 208 | mo.plain_text("Here is some preformatted text with spaces.") 209 | 210 | ``` 211 | """), 212 | 213 | mo.md(f"## {mo.icon('lucide:shapes')} Diagrams"), 214 | 215 | mo.md(""" 216 | 217 | 218 | ```python 219 | # Define a Mermaid diagram 220 | mermaid_diagram = ''' 221 | graph LR 222 | A[Square Rect] -- Link text --> B((Circle)) 223 | ''' 224 | # Render the diagram in Marimo 225 | diagram_view = mo.mermaid(mermaid_diagram) 226 | 227 | # Displaying a simple statistic 228 | simple_stat = mo.stat(value="75%", label="Completion", 229 | caption="of the project is completed", direction="increase", bordered=True) 230 | 231 | ``` 232 | """), 233 | mo.md(f"## {mo.icon('lucide:circle-dashed')} Status"), 234 | mo.md(""" 235 | 236 | 237 | ```python 238 | # Display a progress bar 239 | progress_bar = mo.status.progress_bar(range(100), title="Processing", subtitle="Please wait...", 240 | completion_title="Done", show_rate=True, show_eta=True) 241 | 242 | # Show a spinner while loading or processing 243 | with mo.status.spinner(title="Loading", subtitle="Fetching data"): 244 | # Simulate a long-running process 245 | time.sleep(5) 246 | 247 | ``` 248 | """) 249 | 250 | 251 | 252 | 253 | 254 | ]), 255 | mo.vstack([ 256 | mo.md(f"## {mo.icon('lucide:arrow-big-right-dash')} Outputs"), 257 | 258 | mo.md(""" 259 | 260 | 261 | ```python 262 | 263 | # Replace a cell's output 264 | mo.output.replace("New cell output") 265 | # Append to a cell's output 266 | mo.output.append("Additional cell output") 267 | # Clear a cell's output 268 | mo.output.clear() 269 | # Redirect stdout to cell's output area 270 | with mo.redirect_stdout(): 271 | print("Stdout is redirected to cell output") 272 | # Redirect stderr to cell's output area 273 | with mo.redirect_stderr(): 274 | print("Stderr is redirected to cell output", file=sys.stderr) 275 | # Capture stdout into a variable 276 | with mo.capture_stdout() as captured: 277 | print("Capturing stdout") 278 | captured_stdout = captured.getvalue() 279 | # Capture stderr into a variable 280 | with mo.capture_stderr() as captured: 281 | print("Capturing stderr", file=sys.stderr) 282 | captured_stderr = captured.getvalue() 283 | 284 | ``` 285 | 286 | """), 287 | mo.md(f"## {mo.icon('lucide:code-2')} HTML"), 288 | 289 | mo.md(""" 290 | 291 | ```python 292 | # Convert an object to HTML 293 | plot_html = mo.as_html(plt.figure()) 294 | # Create an Html object directly 295 | html_obj = mo.Html("

Hello, Marimo!

") 296 | # Accessing the text of an Html object 297 | html_text = html_obj.text 298 | # Convert Html object with templated text into a batched UI element 299 | batched_ui = html_obj.batch(name=mo.ui.text(), date=mo.ui.date()) 300 | # Center an item using Html method 301 | centered_html = html_obj.center() 302 | # Right-justify an item using Html method 303 | right_justified_html = html_obj.right() 304 | # Left-justify an item using Html method 305 | left_justified_html = html_obj.left() 306 | # Create a callout containing an Html element 307 | callout_html = html_obj.callout(kind='info') 308 | # Apply custom CSS styles to an Html object 309 | styled_html = html_obj.style({'color': 'red', 'font-weight': 'bold'}) 310 | 311 | ``` 312 | """) 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | ]), 325 | mo.vstack([ 326 | 327 | 328 | 329 | 330 | mo.md(f"## {mo.icon('lucide:arrow-down-up')} Control Flow"), 331 | 332 | mo.md(""" 333 | 334 | 335 | ```python 336 | # Stops execution of a cell when predicate is True 337 | mo.stop(form.value is None, mo.md("**Submit the form to continue.**")) 338 | # Prevent accidental capture with except Exception 339 | try: 340 | mo.stop("This will stop the cell execution") 341 | except MarimoStopError as e: 342 | # Handle the stop error, perhaps logging or taking alternative actions 343 | print("Caught a MarimoStopError") 344 | # Use refresh to auto-refresh descendants at a given interval 345 | mo.ui.refresh(options=["1s", "5s"], default_interval="1s", 346 | label="Auto-refresh rate") 347 | ``` 348 | """), 349 | 350 | 351 | mo.md(f"## {mo.icon('lucide:orbit')} State"), 352 | 353 | 354 | mo.md(""" 355 | 356 | 357 | ```python 358 | # Create state 359 | get_count, set_count = mo.state(0) 360 | # Read the value 361 | current_count = get_count() 362 | # Update the state 363 | set_count(1) 364 | # Update the state based on the current value 365 | set_count(lambda value: value + 1) 366 | # Synchronizing multiple UI elements 367 | get_state, set_state = mo.state(0) 368 | # Updating the state through the slider will recreate the number (below) 369 | slider = mo.ui.slider(0, 100, value=get_state(), on_change=set_state) 370 | # Updating the state through the number will recreate the slider (above) 371 | number = mo.ui.number(0, 100, value=get_state(), on_change=set_state) 372 | # Slider and number are synchronized to have the same value 373 | [slider, number] 374 | ``` 375 | """), 376 | mo.md(f"## {mo.icon('lucide:bug-off')} Debug"), 377 | mo.md(""" 378 | 379 | 380 | ```python 381 | # Getting the definitions of the currently executing cell 382 | cell_defs = mo.defs() 383 | # Getting the references of the currently executing cell 384 | cell_refs = mo.refs() 385 | 386 | ``` 387 | 388 | 389 | 390 | 391 | 392 | """), 393 | 394 | mo.md(f"### {mo.icon('lucide:github')} https://github.com/vrtnis/marimo-cheat-sheet"), 395 | mo.md(f"### {mo.icon('lucide:book-open-text')} Always check https://docs.marimo.io") 396 | 397 | ]) 398 | ]) 399 | 400 | 401 | return 402 | 403 | @app.cell 404 | def __(): 405 | import marimo as mo 406 | 407 | return ( 408 | 409 | mo 410 | 411 | ) 412 | 413 | 414 | if __name__ == "__main__": 415 | app.run() --------------------------------------------------------------------------------