This may be unbelievable — It's a live Python (language) notebook !
I strongly doubt this notebook will be viewable on a mobile device, especially the charts. I recommend viewing on a larger screen, a newer model iPad, laptop, or desktop. In my opinion, it won’t work on Safari.
There are two frames below. These were both created with marimo.io.
The first frame is a complete structural application which calculates the shear and moment diagrams for a beam subject to a partial uniform load. The beam is 10 units long, the loading is one 1 unit per unit length. As you scroll to the end of the first frame, you will see 3 sliders allowing the following parameters to be set:
The second frame is another ‘Hello World’ slider example — to illustrate that code snippets used to work inside WP Engine. I illustrate the use of lists and tables to enhance the UI.
There are two frames below. These were both created with marimo.io.
The first frame is a complete structural application which calculates the shear and moment diagrams for a beam subject to a partial uniform load. The beam is 10 units long, the loading is one 1 unit per unit length. As you scroll to the end of the first frame, you will see 3 sliders allowing the following parameters to be set:
- divisions
- size of plot markers
- rightmost extent of the partial load
The charts interactively update with the slider movements.
The second frame is another ‘Hello World’ slider example — to illustrate that code snippets used to work inside WP Engine. I illustrate the use of lists and tables to enhance the UI.
Just a demo slider with unicode (tomato and vine) characters.
First Frame
It will take a few seconds to load
It will take a few seconds to load
Second Frame
And here’s the standard slider example just to illustrate that code snippets work inside WP Engine.
import marimo as mo
slider0 = mo.ui.slider(1, 10, label="Vines", value=3, show_value=True) slider0_text = "Vines" slider1 = mo.ui.slider(1, 10, label="Tomatoes", value=6, show_value=True) slider1_text = "Tomatoes"
mo.vstack([slider0, slider1])
table = mo.ui.table(
data=[
{"Item": slider0_text, "Value": mo.md(slider0.value * "🍃")},
{"Item": slider1_text, "Value": mo.md(slider1.value * "🍅")},
],
label="",
)
mo.vstack([table, table.value])
col0 = [slider0_text, slider1_text] col1 = [slider0.value * "🍃", slider1.value * "🍅"] mo.vstack([col0, col1])
Press the tiny “m” button link in the upper right corner of the frame below 
to activate the code below in the marimo interactive online playground
import marimo as mo
# %%
slider0 = mo.ui.slider(1, 10, label="Vines", value=3, show_value=True)
slider0_text = "Vines"
# %%
slider1 = mo.ui.slider(1, 10, label="Tomatoes", value=6, show_value=True)
slider1_text = "Tomatoes"
# %%
mo.vstack([slider0, slider1])
# %%
table = mo.ui.table(
data=[
{"Item": slider0_text, "Value": mo.md(slider0.value * "🍃")},
{"Item": slider1_text, "Value": mo.md(slider1.value * "🍅")},
],
label="",
)
# %%
mo.vstack([table, table.value])
# %%
col0 = [slider0_text, slider1_text]
col1 = [slider0.value * "🍃", slider1.value * "🍅"]
# %%
mo.vstack([col0, col1])
.svg)
