What Streamlit is; your first app and st.write

The idea

You've written Python that prints results in a console. That's fine for you, but your manager isn't going to open a terminal. Streamlit is a Python library that turns a script into an interactive web app: a page with titles, tables, charts, buttons and sliders that anyone can open in a browser. You don't write any HTML, CSS or JavaScript. You write Python, and Streamlit builds the page.

That's why data teams love it. A sales dashboard, a "upload your CSV and get a cleaned file" tool, a quick demo of a model: each is an afternoon of Streamlit instead of a week of web development.

Your first app

A Streamlit app is just a Python file. Here's a complete one:

import streamlit as st

st.title("Toko Kita Dashboard")
st.write("Welcome back! Here's how the shop is doing today.")

• import streamlit as st is the standard import, and every command starts with st..
• st.title() shows a big page title.
• st.write() shows text below it.

Press Try it, then look at the App tab under the editor. That's your app.

Running it on your own computer

Save the code as app.py in a uv project, add Streamlit once, then start it from a terminal:

uv add streamlit

uv run streamlit run app.py

Streamlit starts a small web server and opens http://localhost:8501 in your browser. Note that it's streamlit run app.py (here through uv run), not python app.py: running the file with plain Python does nothing useful, because Streamlit's server is what turns your commands into a page.

st.write: the Swiss Army knife

st.write() looks at what you give it and picks a sensible way to display it. That's why it's usually the first command people learn.

import streamlit as st
import pandas as pd

st.write("Plain text, and **Markdown** works too.")
st.write(42)
st.write({"orders": 40, "customers": 12})

sales = pd.DataFrame({
    "category": ["Coffee", "Kitchen", "Stationery"],
    "revenue": [1_520_000, 2_365_000, 694_000],
})
st.write(sales)

• A string is shown as Markdown, a simple formatting language: **bold**, *italic*, `code` and # headings all work.
• A number is shown as text.
• A dictionary or list is shown as neatly indented data (JSON).
• A DataFrame becomes an interactive table.

You can also pass several things at once: st.write("Total revenue:", 4_579_000).

Python lets you write 1_520_000 with underscores to make big numbers readable. The underscores are ignored, so it's the same as 1520000.

Text commands with a clear purpose

st.write() is flexible, but when you know exactly what you're showing, the specific commands make your code clearer:

import streamlit as st

st.title("Toko Kita Dashboard")           # the page title, once
st.header("Sales")                          # a section heading
st.subheader("This month")                  # a smaller heading
st.markdown("Revenue is **up 12%** on last month.")
st.caption("Data refreshed at 08:00 WIB")   # small grey text

They map to the outline of a document, the same way <h1>, <h2> and <p> do in HTML. A reader of your code can see the page structure without running it.

Order is everything

Streamlit draws elements in the order your code runs them, top to bottom. Move a line up and its element moves up the page. There's no separate layout file to keep in sync: the script is the layout.

import streamlit as st

total = 4_579_000
st.title("Daily report")
st.write(f"Total revenue: Rp {total:,}")

The f-string with {total:,} adds thousands separators, so the page shows Total revenue: Rp 4,579,000. You'll learn f-strings properly in the Python track; for now, read it as "put the value of total here, with commas".

Why this matters for clean code

A Streamlit script reads top to bottom like the page it produces, so keep it that way: imports first, then data loading, then the page in display order. Use specific commands (st.title, st.header) rather than st.write for structure, and give your data variables real names (sales, not df). Future you will scroll this file looking for "the bit that draws the revenue table", so make it easy to find.

Recap

• Streamlit turns a Python script into a web app. Start it with streamlit run app.py.
• import streamlit as st, then every command is st.something().
• st.write() displays text (as Markdown), numbers, dicts, lists and DataFrames.
• st.title, st.header, st.subheader, st.markdown and st.caption give your page a clear structure.
• Elements appear in the order your code runs them.