DEV Community

Cover image for The ultimate Streamlit cheatsheet for 2023
Raman Bansal
Raman Bansal

Posted on

The ultimate Streamlit cheatsheet for 2023

Introduction

Here is the cheatsheet that every streamlit beginner needs to know

For basic tasks

Installation and streamlit

For installing just simply use pip command. Here is how.

> pip install streamlit
Enter fullscreen mode Exit fullscreen mode

To keep simple we import streamlit as st. Let me show you how.

import streamlit as st
Enter fullscreen mode Exit fullscreen mode

Subheader

For adding subheader

st.subheader("A subtitle")
Enter fullscreen mode Exit fullscreen mode

Text

This is for adding a paragraph in web page

st.text("Some text")
Enter fullscreen mode Exit fullscreen mode

Markdown

You can simple add markdown to your page by this method.

st.markdown("# Some Markdown")
Enter fullscreen mode Exit fullscreen mode

Displaying Data

dataframe and table is used to just simply display a dataframe in tabular form.

st.dataframe(my_dataframe)
st.table(my_data, width=800, title="Title of sample data")
Enter fullscreen mode Exit fullscreen mode

Width of the table is specified in pixels.

Displaying Images

Here is the sample code for displaying images.

# Load image from URL
image_url = "https://example.com/image.png"
st.image(image_url, caption='Example image')

# Load image from local file
image_file = "path/to/image.png"
st.image(image_file, caption='Example image', width=300)
Enter fullscreen mode Exit fullscreen mode

In streamlit, we can specify caption and width of image. We can also add alt text by just simply adding alt parameter to it. But still you can use caption as an alternative to it.

Displaying Videos

Here is the sample code for running videos.

# Load video from URL
video_url = "https://example.com/video.mp4"
st.video(video_url, width=500)

# Load video from local file
video_file = "path/to/video.mp4"
st.video(video_file, width=500)
Enter fullscreen mode Exit fullscreen mode

Displaying Audio

Here is the sample code to add audio file in the web page.


audio_file = open('my_audio.mp3', 'rb')
audio_bytes = audio_file.read()

st.audio(audio_bytes, format='audio/mp3')

Enter fullscreen mode Exit fullscreen mode

Displaying Interactive Charts

Here is how to add add charts.

st.line_chart(my_data)
st.area_chart(my_data)
st.bar_chart(my_data)
st.scatterplot(my_data)
Enter fullscreen mode Exit fullscreen mode

Displaying Selectable Options

This is same as select tag and checkbox input in html.

option = st.selectbox("Select an option", my_options)
checkbox = st.checkbox("Check me!")
Enter fullscreen mode Exit fullscreen mode

Input Forms

Here is some other input options for beginners.

text_input = st.text_input("Enter some text")
number_input = st.number_input("Enter a number")
date_input = st.date_input("Enter a date")
time_input = st.time_input("Enter a time")
file_input = st.file_uploader("Upload a file")
Enter fullscreen mode Exit fullscreen mode

Buttons

button_clicked = st.button("Click me!", on_click=my_func)
Enter fullscreen mode Exit fullscreen mode

Displaying Progress

Here is how to show spinner for some heavy computation.

with st.spinner("Loading..."):
    # Do some heavy computation
    st.success("Done!")
Enter fullscreen mode Exit fullscreen mode

Adding Layout and styles

Layout Configuration

the page_title argument is set to "My App" and the page_icon argument is set to "😃", which will display a smiley face icon in the browser tab.

st.set_page_config(page_title="My App", page_icon=":smiley:")
Enter fullscreen mode Exit fullscreen mode

App Layout

Here is how you can add columns in streamlit.

col1, col2 = st.columns(2)
with col1:
    st.header("Column 1")
    st.write("Some data")
with col2:
    st.header("Column 2")
    st.write("Some more data")
Enter fullscreen mode Exit fullscreen mode

You can add more than two columns.

Styling Text

Streamlit allows you to select font and also specify the sixe of font and text colour.

st.write("This is some text", font=("Arial", 16), text_color="blue")
Enter fullscreen mode Exit fullscreen mode

Styling Buttons

key is same as id of the button. The help will show a popup text that will display when the user hovers.

st.button("Click me!", key="my_button", help="This is a button")
Enter fullscreen mode Exit fullscreen mode

Styling Containers

Here is the sample code for adding an individual container in streamlit.

with st.container():
    st.write("This is inside a container")
Enter fullscreen mode Exit fullscreen mode

Adding Icons

Hwre is how to add icons.
You just simply have to add :<ICON_NAME>: in text

st.write(":chart_with_upwards_trend: Some text")
Enter fullscreen mode Exit fullscreen mode

Some Advanced features

Caching

@st.cache
def load_data():
    # Load data from a remote source
    return my_data
Enter fullscreen mode Exit fullscreen mode

Streamlit Sharing

import streamlit as st
import streamlit.analytics as st_analytics
Enter fullscreen mode Exit fullscreen mode

Send an event to Google Analytics

st_analytics.write_key("GA_KEY")
st_analytics.event("Event Name", "Event Value")
Enter fullscreen mode Exit fullscreen mode

For more, Visit : [Techwithpie streamlit cheatsheet](https://techwithpie.blogspot.com/2023/03/ultimate-streacheatsheet

Top comments (0)