Skip to content

How to Use Streamlit with VSCode: A Step-by-Step Guide (Updated for 2025)

Olaf Källström
Name
Olaf Källström

Updated on

Are you ready to supercharge your Python development workflow?
Streamlit + VSCode remains one of the fastest ways to build data apps — especially for engineers, data scientists, analysts, and ML practitioners.

This updated guide (2025 edition) walks you through:

  • ✔ How to correctly set up Streamlit in VSCode
  • ✔ How to use virtual environments (best practice)
  • ✔ How to debug Streamlit apps inside VSCode
  • ✔ How to preview apps using the Stlite extension
  • ✔ How to deploy Streamlit apps with modern 2025 hosting options
  • ✔ And how to enhance your workflow with PyGWalker for no-code visualization

Let’s dive in.

Basic Concepts: Streamlit + VSCode

What is Streamlit?

Streamlit is an open-source Python framework for building interactive web apps — without needing HTML, CSS, or JavaScript.
It transforms Python scripts into shareable data apps within minutes.

Key advantages:

  • Zero front-end knowledge required
  • Real-time hot reload
  • Easy widgets (sliders, selects, file upload, charts)
  • Friendly for data exploration, dashboards, ML demos

As of 2025, Streamlit has become the default tool for many data science teams, replacing ad-hoc dashboards, Jupyter widgets, and internal BI prototypes.

Why Use Streamlit in VSCode?

VSCode enhances the Streamlit experience significantly:

1. 🔥 Rapid Development

Write code → Save → Auto-refresh the app instantly.

2. 🧩 Rich Ecosystem

Python extension, Git integration, Copilot/Cursor-style AI tools, formatting, linting, and more.

3. 🐞 First-Class Debugging

VSCode allows breakpoints, variable inspection, and stepping through your Streamlit logic.

4. 🚀 Seamless with Modern Tooling

Works with virtual environments, Conda, uv, Docker, remote SSH, dev containers, etc.

Limitations to Keep in Mind

Streamlit is powerful, but:

  • Not suited for heavy custom frontend or multi-page logic-heavy apps
  • Stateless design makes complex state management tricky
  • Less flexible UI than full web frameworks (FastAPI + React, Django, etc.)

For 90% of internal dashboards and ML tools, however, it's perfect.

How to Use Streamlit in VSCode (2025 Step-by-Step)

Below is the modern recommended workflow.

Step 1 — Create a Virtual Environment (Best Practice)

Instead of installing Streamlit globally, do this:

python3 -m venv .venv
source .venv/bin/activate      # macOS / Linux
.venv\Scripts\activate         # Windows

Or if using uv (super fast):

uv venv
source .venv/bin/activate

Step 2 — Install Streamlit

pip install streamlit

Step 3 — Create a Python File in VSCode

Create a file called example.py:

import streamlit as st
 
st.title("My First Streamlit App")
st.write("Hello, VSCode + Streamlit!")

Step 4 — Run Streamlit from VSCode Terminal

Open terminal:

  • Windows / Linux: Ctrl + Shift + `
  • macOS: Cmd + J

Then run:

streamlit run example.py

Your browser will open automatically at:

http://localhost:8501 (opens in a new tab)

Bonus: Debug Streamlit Apps in VSCode

Add a .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Streamlit App",
      "type": "python",
      "request": "launch",
      "module": "streamlit",
      "args": ["run", "example.py"],
      "console": "integratedTerminal"
    }
  ]
}

Now you can debug with breakpoints, stepping, and variables panel.

Create a Streamlit Visualization App with PyGWalker (Updated)

PyGWalker (opens in a new tab) adds a Tableau-like UI to Streamlit with almost no code.

Perfect for:

  • Data exploration
  • Dashboard prototypes
  • Sharing analysis results

Minimal example:

import streamlit as st
import pygwalker as pyg
import pandas as pd
 
df = pd.read_csv("your-data.csv")
pyg.walk(df, env="streamlit")

Live Demo → https://pygwalkerapp-d0iztqkzcmr.streamlit.app/ (opens in a new tab)

Video tutorial by Sven (CodingIsFun):

VSCode Extension: Stlite (Updated Info)

The Stlite extension provides:

  • Syntax highlighting
  • Snippets for common Streamlit functions
  • Built-in preview panel in VSCode
  • No need to open browser for quick tests

How to use:

  1. Open Command Palette → Launch stlite preview
  2. Choose a .py file
  3. Preview appears in VSCode editor panel

Limitations

  • Uses a WebAssembly version of Streamlit
  • Some components behave differently than the full Python backend
  • Needs network for WASM resources (offline mode is limited)

Still fantastic for quick prototyping.

Deployment: How to Deploy Streamlit

The old “Streamlit Sharing” is discontinued.

Modern deployment options:

✅ Streamlit Community Cloud (recommended for beginners)

Free, fast, simple.

✅ Railway.app

One-click deploy with automatic builds.

✅ Render.com

Free tier + autoscaling.

✅ HuggingFace Spaces

Perfect for ML demos.

✅ AWS / GCP / Azure

For production use — with Docker + load balancing.

Tutorial: ➡ /topics/Streamlit/deploy-streamlit-app

Frequently Asked Questions

1. How do I stop Streamlit in VSCode? Press the Stop button in VSCode terminal or hit Ctrl+C.

2. How do I open the app? Visit: http://localhost:8501

3. Can I use Streamlit in Google Colab? Yes — install Streamlit and use pyngrok for tunneling.

4. Why use virtual environments? They isolate your dependencies and avoid version conflicts.

5. What are common limitations of Streamlit? Limited UI customization, stateless design, not ideal for large-scale frontend apps.

6. What is Streamlit used for? ML demos, dashboards, internal tools, data exploration, rapid interactive apps.

Conclusion

Streamlit + VSCode is one of the fastest ways to build data applications in 2025. Whether you're exploring data, building dashboards, or deploying internal tools, this workflow gives you:

  • fast iteration
  • clean development
  • powerful debugging
  • modern deployment options

Pair it with PyGWalker, Stlite, and VSCode’s evolving AI ecosystem — and you get a full data-product development environment.