Keyboard shortcuts

Problem

I’m more productive when I can use keyboard shortcuts. E.g. press left/right to move to previous / next image. Press space to toggle some viz. Press j/k to move up/down some slider.

Solution

MVP: Provide a way to map 80% of the keys to custom actions. It could be an optional argument to streamlit.button, streamlit.slider (two keys for up/down one step), etc.

Possible additions: Allow to map most keys, inclluding remapping ‘c’ which currenty clears the streamlit cache.

Additional context

Comes form personal need. Also mentioned here: https://discuss.streamlit.io/t/idea-keyboard-bindings/1976 .

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you’d like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[brunomsantiago]

Small update, I continued looking for ways to make @andfanilo hacky solution more robust and I think it is good enough now. Now I get the buttons based on their labels. First I get all buttons then check their labels until I find the desired button. Here is the code of the full proof of concept, also published in a gist

import streamlit as st
import streamlit.components.v1 as components


def left_callback():
    st.write('Left button was clicked')


def right_callback():
    st.write('Right button was clicked')


left_col, right_col, _ = st.columns([1, 1, 3])

with left_col:
    st.button('LEFT', on_click=left_callback)

with right_col:
    st.button('RIGHT', on_click=right_callback)

components.html(
    """
<script>
const doc = window.parent.document;
buttons = Array.from(doc.querySelectorAll('button[kind=primary]'));
const left_button = buttons.find(el => el.innerText === 'LEFT');
const right_button = buttons.find(el => el.innerText === 'RIGHT');
doc.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37: // (37 = left arrow)
            left_button.click();
            break;
        case 39: // (39 = right arrow)
            right_button.click();
            break;
    }
});
</script>
""",
    height=0,
    width=0,
)

[louislva]

Hey @albusdemens and @Pashtetickus. Apologies for the delayed response.

You can uninstall your current streamlit, then download this whl I built and install it: https://github.com/louislva/streamlit/blob/develop/builds/streamlit-1.3.2-py2.py3-none-any.whl

That way you don’t have to set up the build environment. Hope it’s helpful.