Streamlit Structure Basics

Streamlit applications are structured in a straightforward manner, making it easy for developers to create and organize components. The simplicity of the structure allows you to focus on the app’s functionality rather than worrying about the complexities of frontend development. Below is an overview of the core components of a Streamlit app.

1. Importing Libraries

Like any Python application, a Streamlit app begins by importing the necessary libraries. Streamlit’s core functionality is made available through the streamlit library, but you can also import other popular libraries such as pandas and matplotlib for data manipulation and visualization.

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

2. Layout and Widgets

Streamlit provides a variety of widgets to create interactive elements such as buttons, sliders, and file uploaders. You can place these widgets wherever needed in the app. Streamlit handles the layout and responsiveness automatically.

Title and Headers: You can set the title and headers of the application using st.title() and st.header() functions.
Widgets: Use widgets like st.slider() and st.button() to capture user inputs.

import streamlit as st

st.title("Exploring Streamlit Structure")

st.header("Choose a number:")
slider_value = st.slider("Pick a number between 0 and 100", 0, 100, 50)

st.write(f"You selected {slider_value}")

3. Displaying Data

Streamlit makes it easy to display data. You can show data frames, charts, and images using functions like st.dataframe() and st.pyplot(). Streamlit will automatically render the output in the app's interface.

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

# Display a dataframe
data = {'A': [1, 2, 3], 'B': [4, 5, 6]}
df = pd.DataFrame(data)
st.write("Here is a sample dataframe:")
st.dataframe(df)

# Plotting a chart
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [10, 20, 25, 30])
st.pyplot(fig)

Output:

4. Organizing Your Code

For larger applications, it’s a good practice to organize your Streamlit code into functions. This makes the app more maintainable and allows for easy expansion. Here’s an example:

def main():
    st.title("Modular Streamlit App")
    display_data()
    display_chart()

def display_data():
    st.header("Displaying Data")
    data = {'A': [1, 2, 3], 'B': [4, 5, 6]}
    df = pd.DataFrame(data)
    st.dataframe(df)

def display_chart():
    st.header("Displaying Chart")
    fig, ax = plt.subplots()
    ax.plot([1, 2, 3, 4], [10, 20, 25, 30])
    st.pyplot(fig)

if __name__ == "__main__":
    main()

Output:

01. display_data() output:

02. display_chart() output:

Conclusion

Streamlit’s structure is designed to make the development process intuitive. By organizing your app into clearly defined sections and using widgets and display functions, you can create highly interactive and visually appealing applications with minimal effort. This structure allows you to focus on your data and application logic while Streamlit handles the rest.