Streamlit Part 1: Write and Text Elements

Getting Started with Streamlit: A Beginner's Guide

Code can be found here: GitHub - jamesbmour/blog_tutorials:

Video version of blog can be found here: https://youtu.be/EQcqNW7Nw7M

Introduction

Streamlit is an open-source app framework that allows you to create beautiful, interactive web applications with minimal effort. If you’re a data scientist, machine learning engineer, or anyone working with data, Streamlit is the perfect tool to turn your Python scripts into interactive apps quickly. In this tutorial, we will dive into the basics of Streamlit by exploring some of its powerful features, such as st.write(), magic commands, and text elements.

Let’s get started by building a simple app to demonstrate these functionalities!

Setting Up Your Streamlit Environment

Before we jump into the code, make sure you have Streamlit installed. If you haven't installed it yet, you can do so with the following command:

pip install streamlit

Now, let’s start coding our first Streamlit app.

Building Your First Streamlit App

1. Adding a Title to Your App

Streamlit makes it incredibly easy to add titles and headings to your app. The st.title() function allows you to display a large title at the top of your application, which serves as the main heading.

import streamlit as st

st.title("Introduction to Streamlit: Part 1")

This will display a large, bold title at the top of your app.

Streamlit Write Elements

Using st.write() for Versatile Output

The st.write() function is one of the most versatile functions in Streamlit. You can use it to display almost anything, including text, data frames, charts, and more—all with a single line of code.

Displaying a DataFrame

Let's start by displaying a simple DataFrame using st.write().

import pandas as pd

df = pd.DataFrame({
    "Column 1": [1, 2, 3, 4],
    "Column 2": [10, 20, 30, 40]
})

st.write("DataFrame using st.write() function")
st.write(df)

This code creates a DataFrame with two columns and displays it directly in your app. The beauty of st.write() is that it automatically formats the DataFrame into a neat table, complete with scroll bars if needed.

Displaying Markdown Text

Another cool feature of st.write() is its ability to render Markdown text. This allows you to add formatted text, such as headers, subheaders, and paragraphs, with ease.

markdown_txt = (
    "### This is a Markdown Header\\n"
    "#### This is a Markdown Subheader\\n"
    "This is a Markdown paragraph.\\n"
)
st.write(markdown_txt)

With just a few lines of code, you can add rich text to your app.

Streaming Data with st.write_stream()

Streamlit also allows you to stream data to your app in real-time using the st.write_stream() function. This is particularly useful for displaying data that updates over time, such as sensor readings or live analytics.

import time

st.write("## Streaming Data using st.write_stream() function")
stream_btn = st.button("Click Button to Stream Data")

TEXT = """
# Stream a generator, iterable, or stream-like sequence to the app.
"""

def stream_data(txt="Hello, World!"):
    for word in txt.split(" "):
        yield word + " "
        time.sleep(0.01)

if stream_btn:
    st.write_stream(stream_data(TEXT))

In this example, when the button is clicked, the app will start streaming data word by word from the TEXT string, simulating real-time data updates.

Streamlit Text Elements

In addition to data streaming, Streamlit provides several text elements to enhance the presentation of your app.

Headers and Subheaders

You can easily add headers and subheaders using st.header() and st.subheader():

st.header("This is a Header")
st.subheader("This is a Subheader")

These functions help structure your content, making your app more organized and visually appealing.

Captions

Captions are useful for adding small notes or explanations. You can add them using st.caption():

st.caption("This is a caption")

Displaying Code

If you want to display code snippets in your app, you can use st.code():

code_txt = """
import pandas as pd
import streamlit as st

st.title("Streamlit Tutorials")
for i in range(10):
    st.write(i)
"""
st.code(code_txt)

This will display the code in a nicely formatted, syntax-highlighted block.

Displaying Mathematical Expressions

For those who need to include mathematical equations, Streamlit supports LaTeX:

st.latex(r"e = mc^2")
st.latex(r"\\int_a^b x^2 dx")

These commands will render LaTeX equations directly in your app.

Adding Dividers

To separate different sections of your app, you can use st.divider():

st.write("This is some text below the divider.")
st.divider()
st.write("This is some other text below the divider.")

Dividers add a horizontal line between sections, helping to break up the content visually.

Conclusion

In this introductory tutorial, we covered the basics of Streamlit, including how to use st.write() to display data and text, and how to stream data using st.write_stream(). We also explored various text elements to enhance the structure and readability of your app.

Streamlit makes it incredibly easy to create interactive web applications with just a few lines of code. Whether you're building dashboards, data exploration tools, or any other data-driven app, Streamlit provides the tools you need to get started quickly.

In the next tutorial, we’ll dive deeper into widgets and interactivity features in Streamlit. Stay tuned!

If you found this tutorial helpful, don't forget to share it and subscribe for more content. See you in the next post!

If you'd like to support my writing or treat me to a beer: https://buymeacoffee.com/bmours

Comments

[Quintan Barnes]

Particularly for those of us who aren't really into front-end development, Streamlit's text components are an excellent method to rapidly get content up and running in a web application. Especially the 'write' method makes it quite simple to include markdown or even plain text into your application, which is ideal for quick prototyping. I strongly suggest taking a look at Long Summary if you enjoy creating material using tools. Its 'Long Summary' function is perfect for organizing and condensing long text so that visitors can quickly understand the main points. It's been quite helpful to me when elucidating complicated subjects in my Streamlit applications.