Streamlit tutorial part 1
“Hello Streamlit” → widgets → charts → layouts → simple dashboard.
Setup: Install and run Streamlit
Install
In your terminal / command prompt:
pip install streamlit
on mac:
pip3 install streamlit
Create and run your first app
Create a file, e.g. [Link] :
import streamlit as st
[Link]("Hello, Streamlit! ") 👋
[Link]("This is my very first Streamlit app.")
Run it:
streamlit run [Link]
Your browser should open at [Link] .
Official docs:
Get started guide ([Link])
API reference overview ([Link])
1. Basic page elements (text, data, images)
Replace the contents of [Link] with this and play around:
import streamlit as st
import pandas as pd
[Link]("1. Basic Page Elements")
[Link]("Headers and text")
[Link]("This is a subheader")
[Link]("Small, grey caption text")
[Link]("`[Link]` is very flexible – you can pass strings,
numbers, dataframes, etc.")
[Link]("Plain fixed-width text for code-like things.")
[Link]("You can use **Markdown** here, including *italic*
and `code`.")
[Link]()
[Link]("Display data")
df = [Link]({
"name": ["Alice", "Bob", "Charlie"],
"age": [25, 32, 29]
})
[Link]("Here is a small dataframe:")
[Link](df) # scrollable, sortable table
[Link]()
[Link]("Images")
[Link]("You can show images from a URL or local file.")
[Link](
"[Link]
[Link]",
caption="Streamlit logo",
)
Key functions used:
[Link] , [Link] , [Link] , [Link] , [Link] ,
[Link] , [Link]
[Link]
[Link]
Official docs:
Text elements (text, markdown, title, etc.) ([Link])
Data display elements ( [Link] , etc.) ([Link])
2. Basic widgets (interactivity)
Now let’s add user input. Replace the file (or create a new one like
widgets_demo.py ):
import streamlit as st
[Link]("2. Basic Widgets Demo")
[Link]("Buttons & text inputs")
name = st.text_input("What is your name?")
if [Link]("Say hello"):
if name:
[Link](f"Hello, {name} ") 👋
else:
[Link]("Please enter your name first.")
[Link]()
[Link]("Numeric inputs")
age = st.number_input("Your age", min_value=0, max_value=120,
value=25)
[Link]("You entered age:", age)
[Link]("Pick a value", min_value=0, max_value=100, value=50,
key="slider_example")
[Link]()
[Link]("Selection widgets")
color = [Link]("Favourite colour", ["Red", "Green",
"Blue"])
options = [Link]("Choose some fruits", ["Apple",
"Banana", "Orange", "Grapes"])
[Link]("Colour:", color)
[Link]("Fruits:", options)
[Link]()
[Link]("Booleans and dates")
agree = [Link]("I agree to the terms")
if agree:
[Link]("Thanks for agreeing. ")
date = st.date_input("Pick a date")
[Link]("Chosen date:", date)
Common widgets you’ve just used:
[Link] , st.text_input , st.number_input , [Link]
[Link] , [Link]
[Link] , st.date_input
Official docs:
Input widgets reference ([Link])
3. Basic charts and graphs
Let’s visualise some data using built-in chart functions.
Create charts_demo.py :
import streamlit as st
import pandas as pd
import numpy as np
[Link]("3. Charts Demo")
[Link]("Line, area, and bar charts")
# Fake time series data
data = [Link](
[Link](20, 3),
columns=["A", "B", "C"]
)
[Link]("Line chart")
st.line_chart(data)
[Link]("Area chart")
st.area_chart(data)
[Link]("Bar chart")
st.bar_chart(data)
[Link]()
[Link]("Scatter chart & map")
# Scatter chart
scatter_data = [Link](
[Link](100, 3),
columns=["x", "y", "size"]
)
[Link]("Scatter chart")
st.scatter_chart(scatter_data, x="x", y="y", size="size")
# Map (requires lat/lon columns)
[Link]("Map")
map_data = [Link]({
"lat": 51.5 + [Link](100) * 0.01,
"lon": -0.12 + [Link](100) * 0.01,
})
[Link](map_data)
If you want more control, you can use libraries like Altair, Matplotlib, or Plotly:
import altair as alt
[Link]("Altair example")
chart = (
[Link](data.reset_index())
.mark_line()
.encode(
x="index",
y="A",
)
)
st.altair_chart(chart, use_container_width=True)
Official docs:
Chart elements (line/area/bar/scatter/map) ([Link])
Plotly in Streamlit ( st.plotly_chart ) ([Link])
4. Layout: sidebars, columns, and sections
Now we’ll control the layout so it looks like a dashboard.
Create layout_demo.py :
import streamlit as st
import pandas as pd
import numpy as np
st.set_page_config(page_title="Layout Demo", layout="wide")
[Link](" 4️⃣ Layout Demo – Building a Simple Dashboard")
# ---- SIDEBAR ----
with [Link]:
[Link]("Controls")
n_points = [Link]("Number of points", 10, 500, 100)
show_table = [Link]("Show raw data")
# ---- MAIN CONTENT ----
[Link]("Main Content")
# Create some random data
data = [Link](
[Link](n_points, 3),
columns=["Feature 1", "Feature 2", "Feature 3"]
)
# Use columns to split space
col1, col2 = [Link](2)
with col1:
[Link]("Line chart")
st.line_chart(data)
with col2:
[Link]("Bar chart")
st.bar_chart(data)
# Optional table in an expander
with [Link]("See raw data"):
if show_table:
[Link](data)
else:
[Link]("Tick 'Show raw data' in the sidebar to see the
table.")
Key layout tools:
st.set_page_config(layout="wide")
[Link] for a sidebar
[Link]() for side-by-side sections
[Link]() for collapsible sections
[Link]() to visually separate blocks
Official docs:
Layout and containers (columns, tabs, sidebar, expanders, containers)
([Link])
5.“dashboard”
Putting it together: a tiny single-page
Now combine widgets + charts + layout into a simple but real-ish dashboard.
Create mini_dashboard.py :
import streamlit as st
import pandas as pd
import numpy as np
st.set_page_config(page_title="Mini Dashboard", layout="wide")
[Link](" 📊 Mini Sales Dashboard")
# ---------- Sidebar filters ----------
with [Link]:
[Link]("Filters")
year = [Link]("Year", [2023, 2024, 2025])
min_revenue = [Link]("Min revenue", 0, 100000, 20000,
step=5000)
# ---------- Fake data ----------
[Link](42)
df = [Link]({
"year": [Link]([2023, 2024, 2025], size=200),
"region": [Link](["Europe", "Asia", "Americas"],
size=200),
"revenue": [Link](5_000, 100_000, size=200),
})
# Apply filters
filtered = df[(df["year"] == year) & (df["revenue"] >=
min_revenue)]
[Link](f"Showing {len(filtered)} rows for year {year} with
revenue ≥ {min_revenue}")
# ---------- Layout ----------
col1, col2 = [Link](2)
with col1:
[Link]("Revenue by Region")
rev_by_region = [Link]("region")["revenue"].sum()
st.bar_chart(rev_by_region)
with col2:
[Link]("Revenue distribution")
st.area_chart(filtered["revenue"])
with [Link]("See filtered data"):
[Link](filtered)
This is essentially a simple dashboard:
Sidebar controls input (year + threshold)
Main page shows charts
Expander reveals details
In [ ]: