Is it possible to read/set st.session_state content in Javascript?

I need to inject some JS to control the styling of st.buttons and other Streamlit components.
Their style depends on st.session_state values.
Is it possible to read/set values in st.session_state in JS?

1 Like

Not exactly afaik, though you could build the JS script based on the values held on st.session_state.

import streamlit as st

def color_button(n_element:int, color:str):
    js = fr'''
    // Find all the buttons
    var buttons = window.parent.document.getElementsByClassName("stButton");
    // Select only one button
    var button = buttons[{n_element}].getElementsByTagName("button")[0];

    // Modify its color = '{color}';
    st.components.v1.html(js, width=0, height=0)

cols = st.columns(4)

for i, col in enumerate(cols):
    with col:
        st.button(f"Button {i}", use_container_width=True)
        st.color_picker("Color the button", "#9988dd", key=f"color_{i}")
        color_button(i, st.session_state[f"color_{i}"])

"**Session state:**"

To modify the state (JS → python), I believe implementing a bi-directional component would be necessary (check Components API - Streamlit Docs).


Thank you!
The “set” part is not really necessary, and your solution works perfectly in my case.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.