The Interface
No HTML. No CSS. No JavaScript. Just Python.
1. Streamlit
Streamlit turns a Python script into an interactive app.
You write Python. Streamlit renders the interface in the browser.
🧑💻 Install
uv add streamlitCreate
import streamlit as st
st.title("Hello World")Run
streamlit run main.pyBrowser opens. Your app is live.
2. Text
Use titles, headers, and text to display information.
🧑💻 Example
st.title("Student Dashboard")
st.header("Python Course")
st.write("Welcome to Streamlit!")📌 Summary
| Task | Code |
|---|---|
| Big title | st.title("text") |
| Section header | st.header("text") |
| General text | st.write("text") |
3. Button
A button returns True when clicked.
Store the result in a variable, then use if.
🧑💻 Example
submitted = st.button("Submit")
if submitted:
st.success("Submitted!")Primary Button
submitted = st.button("Submit", type="primary")
if submitted:
st.success("Submitted!")📌 Summary
| Task | Code |
|---|---|
| Button | st.button("Submit") |
| Primary button | st.button("Submit", type="primary") |
| Check click | if submitted: |
4. Text Input
A single-line input for text.
🧑💻 Example
name = st.text_input("Your name")
if name:
st.write(f"Hello {name}")📌 Summary
| Task | Code |
|---|---|
| Text input | st.text_input("label") |
| Get value | Store it in a variable |
5. Number Input
An input that only accepts numbers.
🧑💻 Example
age = st.number_input(
"Your age",
min_value=0,
max_value=120
)
st.write(age)📌 Summary
| Task | Code |
|---|---|
| Number input | st.number_input("label") |
| Minimum | min_value=0 |
| Maximum | max_value=120 |
6. Text Area
A multi-line input for longer text.
🧑💻 Example
bio = st.text_area("Tell us about yourself")
st.write(bio)📌 Summary
| Task | Code |
|---|---|
| Multi-line input | st.text_area("label") |
7. Select Box
A dropdown where the user chooses one option.
🧑💻 Example
course = st.selectbox(
"Choose a course",
["Python", "React", "AI"]
)
st.write(course)📌 Summary
| Task | Code |
|---|---|
| Dropdown | st.selectbox("label", [options]) |
8. Radio Buttons
Display multiple options. The user chooses one.
🧑💻 Example
level = st.radio(
"Choose your level",
["Beginner", "Intermediate", "Advanced"]
)
st.write(level)📌 Summary
| Task | Code |
|---|---|
| Radio buttons | st.radio("label", [options]) |
9. Checkbox
A checkbox is either True or False.
🧑💻 Example
agree = st.checkbox("I agree")
if agree:
st.success("Thanks!")📌 Summary
| Task | Code |
|---|---|
| Checkbox | st.checkbox("label") |
| Check if selected | if agree: |
10. Form
Why Forms?
Without a form, Streamlit reacts to every input change.
Type → Rerun
Type → Rerun
Change input → RerunA form groups your inputs and waits:
Fill inputs → Click Submit → Rerun💡 Use forms when multiple inputs belong together.
🧑💻 Example
with st.form("register"):
name = st.text_input("Name")
age = st.number_input("Age")
submitted = st.form_submit_button("Register")
if submitted:
st.success(f"{name} registered!")📌 Summary
| Task | Code |
|---|---|
| Create form | with st.form("name"): |
| Submit | st.form_submit_button("Register") |
| Check submit | if submitted: |
11. Layout
Streamlit uses columns to organize content horizontally.
You can also control how much space each column gets.
🧑💻 Center Content
left, center, right = st.columns([1, 2, 1]) # 50% center
with center:
st.title("Register")
name = st.text_input("Name")
email = st.text_input("Email")Think of [1, 2, 1] as proportions:
[ 1 ] [ 2 ] [ 1 ]
25% 50% 25%
left center right💡 Great for centering forms and small apps without CSS.
Equal Columns
left, right = st.columns(2)
with left:
st.button("Like")
with right:
st.button("Share")Sidebar
Use the sidebar for settings, filters, or extra controls.
st.sidebar.title("Settings")
level = st.sidebar.selectbox(
"Level",
["Beginner", "Advanced"]
)📌 Summary
| Task | Code |
|---|---|
| Two equal columns | st.columns(2) |
| Center at 50% | st.columns([1, 2, 1]) |
| Custom proportions | st.columns([1, 3, 1]) |
| Use a column | with center: |
| Sidebar | st.sidebar |
12. Theme
Streamlit lets you change the colors of your entire app without CSS.
Create:
.streamlit/config.tomlStreamlit automatically reads this file. You don't import it.
🧑💻 Example
[theme]
base = "light"
primaryColor = "#C2410C"
backgroundColor = "#FAFAF9"
secondaryBackgroundColor = "#F3F4F6"
textColor = "#0F172A"🎨 What Changes?
backgroundColor → Page background
secondaryBackgroundColor → Secondary surfaces
textColor → Text
primaryColor → Accent / interactive elementsprimaryColor is easiest to see with a primary button:
st.button("Register", type="primary")📌 Summary
| Task | Config |
|---|---|
| Base theme | base = "light" |
| Accent | primaryColor |
| Page background | backgroundColor |
| Secondary background | secondaryBackgroundColor |
| Text | textColor |
13. Messages
Show feedback to the user with colored messages.
🧑💻 Example
st.success("Saved!")
st.warning("Missing input!")
st.error("Something went wrong!")
st.info("Loading...")📌 Summary
| Type | Code |
|---|---|
| Success | st.success("text") |
| Warning | st.warning("text") |
| Error | st.error("text") |
| Info | st.info("text") |
14. Deploy
Your app currently runs on your computer:
localhostDeploy it to give it a public URL anyone can open.
🧩 How?
- Push your project to GitHub
- Open Streamlit Community Cloud
- Connect your GitHub repository
- Select main.py
- Click Deploy
Your app now has a public URL.