How to use Streamlit with VS Code?

Show the Community!
,
1

I’ve written a little tutorial on how to use Streamlit with VS Code including

  • Setting up a keyboard shortcut to streamlit run the active file
  • Using manual debugging
  • Using the integrated debugger.

You can find it here https://awesome-streamlit.readthedocs.io

image
image.png1280×984 180 KB

Keywords: VS Code, Keyboard Shortcuts, Debugging

9 Likes
2

That is Awesome Marc!! :call_me_hand: Super fedt !! mvh Jesper

2 Likes
3

Tak @flight505 . :+1::smile:

1 Like
4

I’ve updated the guide on using VS Code and streamlit with more tips and tricks.

You can find it at https://awesome-streamlit.readthedocs.io/en/latest/vscode.html

image
image1176×705 84.4 KB

2 Likes
5

Hola, tiene un tutorial o video donde sea mas especifico en la manera de usar streamlit en visual studio code, ya que su tutorial actual resulta engorroso y difícil de entender. en si es pésimo. agradezco su tiempo y buen dia.

1 Like
6

The following launch configuration works to invoke the integrated debugger of vscode:
{
“name”: “Python: Streamlit”,
“type”: “python”,
“request”: “launch”,
“module”: “streamlit.cli”,
“args”: [
“run”,
“${file}”,
],
}

To add or invoke a launch configuration in vscode, use Ctrl+Shift+P, choose “Debug: Select and Start Debugging”, and edit launch.json with the snippet above.

Inspired from here, I did not yet see this approach in the tutorial.

6 Likes
7

Dear all,

I’d like to come back to this, since I ran into some trouble with streamlit and vscode.

I’d like to use async routines in my app and tested a little bit. Already with this script

import streamlit as st 
import asyncio
from datetime import datetime

st.set_page_config(layout="wide")

st.markdown(
    """
    <style>
    .time {
        font-size: 130px !important;
        font-weight: 700 !important;
        color: #ec5953 !important;
    }
    </style>
    """,
    unsafe_allow_html=True
)

async def watch(test):
    while True:
        test.markdown(
            f"""
            <p class="time">
                {str(datetime.now())}
            </p>
            """, unsafe_allow_html=True)
        res = await asyncio.sleep(1)

test = st.empty()

if st.button("Click me."):
    st.image("https://cdn11.bigcommerce.com/s-7va6f0fjxr/images/stencil/1280x1280/products/40655/56894/Jdm-Decals-Like-A-Boss-Meme-Jdm-Decal-Sticker-Vinyl-Decal-Sticker__31547.1506197439.jpg?c=2", width=200)

asyncio.run(watch(test))

which actually originates from Issue with asyncio run in streamlit, I got stuck.

The script starts without problems, however, when clicking ‘Click me’ I receive

Exception has occurred: RerunException       (note: full exception trace is shown but execution is paused at: watch)
RerunData(query_string='', widget_states=widgets {
  id: "$$GENERATED_WIDGET_KEY-d1af2ca94fbc523761576e0810c8012c-None"
  trigger_value: true
}
)
  File "/home/markus/Software/Python/streamlit/test1.py", line 28, in watch (Current frame)
    test.markdown(
  File "/home/markus/Software/Python/streamlit/test1.py", line 42, in <module>
    asyncio.run(watch(test))

in the line test.markdown.

Unfortunately, I have no clue, why this is happening, though it seems, that doing this in PyCharm does not run into this problem (I’d like to stay with VS Code).

Thanks a lot in advance for every hint!
Markus

8

Please see:

Best wishes
Markus