streamlit pages

Guri Bee

2 min read

·

19-10-2024

1

0

Share

Streamlit Pages: Building Interactive Web Apps with Ease

Streamlit is a powerful Python library that allows you to quickly create and deploy interactive web applications. One of its standout features is Streamlit Pages, which lets you organize your Streamlit apps into modular, reusable components. This article explores Streamlit Pages, showcasing their benefits and providing practical examples to get you started.

What are Streamlit Pages?

Streamlit Pages are essentially separate Python files that represent different sections or features within your Streamlit application. Each page functions as a standalone module, allowing you to:

• Organize your code: Break down complex applications into manageable chunks, enhancing readability and maintainability.
• Share and reuse components: Easily share individual pages with other projects or collaborate on specific functionalities.
• Create multi-page applications: Provide a structured user experience with distinct navigation between different sections.

Benefits of Using Streamlit Pages:

• Improved Organization: A modular structure makes your codebase more manageable, especially for larger projects.
• Enhanced Collaboration: Teams can work on different pages concurrently, streamlining development.
• Simplified Navigation: Provides a clear structure for users to navigate your app, enhancing the overall experience.
• Enhanced Reusability: Components can be easily reused across multiple pages, saving time and effort.

Getting Started with Streamlit Pages

1. Creating a Page:

   • Create a Python file (e.g., my_page.py) within your Streamlit project directory.
   • Decorate this file with the @st.experimental_singleton decorator. This ensures that the page is loaded only once when the app starts.

   import streamlit as st
   
   @st.experimental_singleton
   def my_page():
       st.title("Welcome to My Page!")
       # Your page content here
   

2. Adding Navigation:

   • In your main Streamlit file (e.g., app.py), import the my_page function and call it within a navigation section.

   import streamlit as st
   from my_page import my_page  # Import your page function
   
   st.sidebar.title("Navigation")
   
   if st.sidebar.button("My Page"):
       my_page()  # Run the page function
   

Example: A Simple Multi-Page Streamlit App

Let's create a basic Streamlit app with two pages: "Home" and "Data Visualization".

home.py:

import streamlit as st

@st.experimental_singleton
def home():
    st.title("Welcome to My Streamlit App!")
    st.write("This is the Home page.")

visualization.py:

import streamlit as st
import pandas as pd

@st.experimental_singleton
def visualization():
    st.title("Data Visualization")

    # Sample Data
    df = pd.DataFrame({"A": [1, 2, 3], "B": [4, 5, 6]})

    # Create a simple chart
    st.line_chart(df)

app.py:

import streamlit as st
from home import home
from visualization import visualization

st.sidebar.title("Navigation")

if st.sidebar.button("Home"):
    home()

if st.sidebar.button("Data Visualization"):
    visualization()

Now, running streamlit run app.py will launch a multi-page Streamlit app with navigation options.

Advanced Techniques:

• Passing Data Between Pages: You can share data between pages using Streamlit's session_state.
• Creating Dynamic Pages: Use Streamlit's multiselect or radio widgets to dynamically switch between pages based on user selections.
• Embedding External Content: Integrate external resources like interactive maps, charts, or data dashboards using Streamlit's iframe component.

Conclusion:

Streamlit Pages offer a powerful and intuitive approach to building complex and modular web applications. They simplify the development process by promoting code organization, reusability, and collaborative development. By exploring Streamlit Pages and incorporating these techniques, you can create interactive, user-friendly web applications that are both visually appealing and functionally robust.

For further exploration:

• Streamlit Documentation: https://docs.streamlit.io/
• Streamlit Community Forum: https://discuss.streamlit.io/
• GitHub Repository: https://github.com/streamlit/streamlit