Playing with Streamlit Fragments (v1.33) - Timer + Counter

st_counter_timer_fragments.py

import streamlit as st

##### Initialize Session State
if "counter" not in st.session_state:
    st.session_state.counter = 0
if "timer" not in st.session_state:
    st.session_state.timer = 0


##### Build Logic into Fragments
@st.experimental_fragment
def counter_widget(
    increment_button_placeholder,
    decrement_button_placeholder,
    display_counter_placeholder,
):
    if increment_button_placeholder.button("➕ Increment"):
        st.session_state.counter += 1
    if decrement_button_placeholder.button("➖ Decrement"):
        st.session_state.counter -= 1

    display_counter_placeholder.metric("🔢 Counter", st.session_state.counter)


@st.experimental_fragment(run_every="1s")
def display_timer(timer_placeholder):
    st.session_state.timer += 1
    timer_placeholder.metric(f"⏳ Timer", st.session_state.timer)


@st.experimental_fragment
def display_state(container_placeholder):
    left_top, right_top = container_placeholder.columns(2)
    left_bottom, right_bottom = container_placeholder.columns([3, 1])

    if left_bottom.button(
        "🔄 Update Display", type="primary", use_container_width=True
    ):
        st.rerun()
    if right_bottom.button("❌ Reset timer", use_container_width=True):
        st.session_state.timer = 0
        st.rerun()

    left_top.subheader(f"Current Counter: {st.session_state.counter}")
    right_top.subheader(f"Current Timer: {st.session_state.timer}")


##### Build Placeholders
st.title("Independent states & fragments")

left_col, right_col = st.columns(2)
left_incr, right_incr = left_col.columns(2)
left_counter, right_timer = right_col.columns(2)

increment_placeholder = left_incr.empty()
decrement_placeholder = right_incr.empty()
counter_placeholder = left_counter.empty()
timer_placeholder = right_timer.empty()

main_display_placeholder = st.container(border=True)

##### Link Fragments to Placeholders
counter_widget(increment_placeholder, decrement_placeholder, counter_placeholder)
display_timer(timer_placeholder)
display_state(main_display_placeholder)