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

[Nemecsek]

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?

[edsaac]

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'''
    <script>
    // 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
    button.style.backgroundColor = '{color}';
    </script>
    '''
    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:**"
st.write(st.session_state)

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

[Nemecsek]

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