Skip to content

Cómo usar Streamlit con VSCode: Guía paso a paso (actualizada para 2025)

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

Updated on

¿Listo para potenciar tu flujo de trabajo de desarrollo en Python?
Streamlit + VSCode sigue siendo una de las formas más rápidas de construir aplicaciones de datos, especialmente para ingenieros, científicos de datos, analistas y profesionales de ML.

Esta guía actualizada (edición 2025) te explica:

  • ✔ Cómo configurar Streamlit correctamente en VSCode
  • ✔ Cómo usar entornos virtuales (mejor práctica)
  • ✔ Cómo depurar aplicaciones de Streamlit dentro de VSCode
  • ✔ Cómo previsualizar apps usando la extensión Stlite
  • ✔ Cómo desplegar aplicaciones de Streamlit con opciones modernas de hosting en 2025
  • ✔ Y cómo mejorar tu flujo de trabajo con PyGWalker para visualización sin código

Vamos al detalle.

Conceptos básicos: Streamlit + VSCode

¿Qué es Streamlit?

Streamlit es un framework de Python de código abierto para crear aplicaciones web interactivas, sin necesidad de HTML, CSS o JavaScript.
Convierte scripts de Python en aplicaciones de datos compartibles en cuestión de minutos.

Ventajas clave:

  • No se necesita conocimiento de front-end
  • Recarga en caliente en tiempo real
  • Widgets sencillos (sliders, selects, carga de archivos, gráficos)
  • Muy adecuado para exploración de datos, dashboards, demos de ML

A partir de 2025, Streamlit se ha convertido en la herramienta por defecto para muchos equipos de ciencia de datos, reemplazando dashboards ad‑hoc, widgets de Jupyter y prototipos internos de BI.

¿Por qué usar Streamlit en VSCode?

VSCode mejora de forma significativa la experiencia con Streamlit:

1. 🔥 Desarrollo rápido

Escribes código → guardas → la app se actualiza de inmediato.

2. 🧩 Ecosistema rico

Extensión de Python, integración con Git, herramientas de IA tipo Copilot/Cursor, formateo, linting y más.

3. 🐞 Depuración de primera clase

VSCode permite puntos de ruptura, inspección de variables y ejecutar paso a paso la lógica de tu app Streamlit.

4. 🚀 Integración fluida con herramientas modernas

Funciona con entornos virtuales, Conda, uv, Docker, SSH remoto, dev containers, etc.

Limitaciones a tener en cuenta

Streamlit es potente, pero:

  • No está pensado para frontends muy personalizados o apps multipágina con lógica compleja
  • Su diseño sin estado hace más difícil la gestión de estados complejos
  • Tiene una UI menos flexible que frameworks web completos (FastAPI + React, Django, etc.)

Sin embargo, para el 90% de dashboards internos y herramientas de ML, es perfecto.

Cómo usar Streamlit en VSCode (paso a paso 2025)

A continuación, el flujo de trabajo moderno recomendado.

Paso 1 — Crea un entorno virtual (mejor práctica)

En lugar de instalar Streamlit globalmente, haz esto:

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

O si usas uv (super rápido):

uv venv
source .venv/bin/activate

Paso 2 — Instala Streamlit

pip install streamlit

Paso 3 — Crea un archivo de Python en VSCode

Crea un archivo llamado example.py:

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

Paso 4 — Ejecuta Streamlit desde la terminal de VSCode

Abre la terminal:

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

Luego ejecuta:

streamlit run example.py

Tu navegador se abrirá automáticamente en:

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

Bonus: depurar aplicaciones de Streamlit en VSCode

Añade un .vscode/launch.json:

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

Ahora puedes depurar con puntos de ruptura, ejecución paso a paso y panel de variables.

Crea una app de visualización en Streamlit con PyGWalker (actualizado)

PyGWalker (opens in a new tab) añade una interfaz tipo Tableau a Streamlit con casi nada de código.

Perfecto para:

  • Exploración de datos
  • Prototipos de dashboards
  • Compartir resultados de análisis

Ejemplo mínimo:

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

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

Video tutorial de Sven (CodingIsFun):

Extensión de VSCode: Stlite (info actualizada)

La extensión Stlite proporciona:

  • Resaltado de sintaxis
  • Snippets para funciones comunes de Streamlit
  • Panel de previsualización integrado en VSCode
  • No necesitas abrir el navegador para pruebas rápidas

Cómo usarla:

  1. Abre la Command Palette → Launch stlite preview
  2. Elige un archivo .py
  3. La previsualización aparece en el panel del editor de VSCode

Limitaciones

  • Usa una versión WebAssembly de Streamlit
  • Algunos componentes se comportan de forma diferente al backend completo de Python
  • Necesita red para los recursos WASM (el modo offline es limitado)

Aun así, es fantástica para prototipado rápido.

Despliegue: cómo desplegar Streamlit

El antiguo “Streamlit Sharing” está descontinuado.

Opciones modernas de despliegue:

✅ Streamlit Community Cloud (recomendado para principiantes)

Gratis, rápido y sencillo.

✅ Railway.app

Despliegue con un clic y builds automáticas.

✅ Render.com

Capa gratuita + autoescalado.

✅ HuggingFace Spaces

Perfecto para demos de ML.

✅ AWS / GCP / Azure

Para uso en producción — con Docker + balanceo de carga.

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

Preguntas frecuentes

1. ¿Cómo detengo Streamlit en VSCode?
Pulsa el botón de Stop en la terminal de VSCode o presiona Ctrl+C.

2. ¿Cómo abro la aplicación?
Visita: http://localhost:8501

3. ¿Puedo usar Streamlit en Google Colab?
Sí: instala Streamlit y usa pyngrok para crear un túnel al servidor local.

4. ¿Por qué usar entornos virtuales?
Aíslan tus dependencias y evitan conflictos de versiones.

5. ¿Cuáles son las limitaciones comunes de Streamlit?
Personalización de UI limitada, diseño sin estado complejo y no ideal para apps de frontend a gran escala.

6. ¿Para qué se usa Streamlit?
Demos de ML, dashboards, herramientas internas, exploración de datos y apps interactivas rápidas.

Conclusión

Streamlit + VSCode es una de las formas más rápidas de construir aplicaciones de datos en 2025.
Tanto si estás explorando datos, construyendo dashboards o desplegando herramientas internas, este flujo de trabajo te ofrece:

  • iteración rápida
  • desarrollo limpio
  • depuración potente
  • opciones modernas de despliegue

Combínalo con PyGWalker, Stlite y el ecosistema de IA en evolución de VSCode, y obtendrás un entorno completo para desarrollar productos de datos.