Displaying Text, Tables, and Media in Streamlit Apps

Before you add any interactivity to a Streamlit app, you need to know how to display content — text, data, media, and status messages. Streamlit provides a dedicated function for almost every type of output you’d want to present, and they all follow the same pattern: call a st. function with your content as the argument. This page covers every major content-display function you’ll need, from simple paragraphs to styled DataFrames to error banners.

Text and Markdown

st.write() is Streamlit’s Swiss Army knife — it accepts strings, numbers, Pandas DataFrames, Matplotlib figures, and many other types and renders them appropriately.

import streamlit as st

st.write("This is a simple message")
st.write("You can also write", "multiple", "arguments")

For richer formatting, use st.markdown() with standard Markdown syntax:

st.markdown("Use *italic* or **bold** text")
st.markdown("---")  # horizontal rule
st.markdown("> A blockquote")

Headers and Structure

Use heading functions to organize your app into clear sections:

st.title("Main Title")         # Largest heading
st.header("Section Heading")  # H2-level
st.subheader("Sub-section")   # H3-level
st.caption("Small caption text below a chart")

Tables and DataFrames

Streamlit offers two ways to display tabular data:

Function	Type	Features
`st.dataframe()`	Interactive	Sorting, scrolling, search
`st.table()`	Static	Fixed display, no interaction

import streamlit as st
import pandas as pd

sales = pd.DataFrame({
    "Product": ["Phone", "Laptop", "Headphones"],
    "Price":   [45000, 75000, 4500],
    "In Stock": [True, True, False]
})

st.subheader("Interactive Table")
st.dataframe(sales)

st.subheader("Static Table (first 2 rows)")
st.table(sales.head(2))

Use st.dataframe() for large datasets where users need to sort or search. Use st.table() for small, fixed reference tables where you want a clean, print-like appearance.

Images

Display local files or images from a URL:

import streamlit as st

# Remote URL
st.image(
    "https://streamlit.io/images/brand/streamlit-logo-secondary-colormark.png",
    caption="Streamlit Logo",
    width=200
)

# Local file
st.image("images/chart.png", use_column_width=True)

Code and JSON

Show syntax-highlighted code samples or raw JSON data directly in your app:

import streamlit as st

# Code block with language highlighting
st.code("print('Hello from Streamlit')", language="python")

st.code("""
SELECT employee_name, salary
FROM employee
WHERE salary > 70000;
""", language="sql")

# Pretty-printed JSON
st.json({"status": "ok", "items": [1, 2, 3], "user": {"id": 42}})

Status and Alert Messages

Use status helpers to communicate state, results, and warnings to your users:

import streamlit as st

st.success("Data loaded successfully")   # Green
st.info("Waiting for user input")        # Blue
st.warning("This may take a moment")     # Yellow
st.error("Something went wrong")         # Red

You can also display a progress bar or spinner for long-running operations:

import streamlit as st
import time

# Spinner — shows while a block of code runs
with st.spinner("Calculating results..."):
    time.sleep(2)
st.success("Done!")

# Progress bar — useful for loops
progress = st.progress(0)
for i in range(100):
    time.sleep(0.01)
    progress.progress(i + 1)

Combining Elements

In practice you’ll combine these building blocks to create structured, readable app sections. Here’s a minimal product card:

import streamlit as st
import pandas as pd

st.title("Product Inventory")
st.markdown("Review current stock levels and pricing.")

inventory = pd.DataFrame({
    "Product":  ["Phone", "Laptop", "Tablet"],
    "Price":    [45000, 75000, 30000],
    "In Stock": [True, True, False]
})

st.dataframe(inventory)

if not inventory["In Stock"].all():
    st.warning("Some products are currently out of stock.")

SQL & Databases

Data Analysis

FastAPI

Frontend

Displaying Text, Tables, and Media in Streamlit Apps

Text and Markdown

Headers and Structure

Tables and DataFrames

Images

Code and JSON

Status and Alert Messages

Combining Elements

​Text and Markdown

​Headers and Structure

​Tables and DataFrames

​Images

​Code and JSON

​Status and Alert Messages

​Combining Elements

Text and Markdown

Headers and Structure

Tables and DataFrames

Images

Code and JSON

Status and Alert Messages

Combining Elements