Introduction to Streamlit Components

Name: Olaf Källström

Updated on 7/24/2023

Streamlit is a powerful open-source library that allows data scientists and developers to create interactive, user-friendly web applications for machine learning and data science. At the heart of these applications are Streamlit components, a set of interactive widgets that enable users to manipulate and interact with the data presented to them.

Streamlit components are the building blocks of Streamlit applications. They provide the user interface, allowing users to interact with the application in various ways. From simple buttons and checkboxes to more complex forms and tables, Streamlit components offer a wide range of possibilities for creating interactive and dynamic data science applications.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly. Check out this amazing video how to explore data with pygwalker (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!

Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.

Interactive Widgets in Streamlit

In Streamlit, widgets are the primary means of user interaction. They allow users to input data, make selections, and control the behavior of the application. Streamlit offers a variety of widgets, including buttons, checkboxes, text inputs, sliders, and more. Each widget serves a specific purpose and can be customized to fit the needs of the application.

Widgets in Streamlit are not just for user input. They can also be used to display data and other information. For example, a table widget can be used to display a data frame, while a markdown widget can be used to display formatted text. This flexibility makes widgets a powerful tool for creating interactive and dynamic data science applications.

Deep Dive into Streamlit Components

Streamlit Button

A Streamlit button is a simple yet powerful component. It allows users to trigger actions in the application, such as running a script or updating a display. The button component is defined using the st.button function, which takes a string argument for the button label.

import streamlit as st
 
if st.button('Click Me'):
    st.write('Button clicked!')

In this example, when the button labeled 'Click Me' is clicked, the message 'Button clicked!' is displayed on the screen. This simple mechanism can be used to trigger more complex actions, making the button a versatile component in Streamlit applications.

Streamlit Columns

Streamlit columns allow you to organize your application's layout more effectively. With the st.columns function, you can divide your application into multiple columns and place different components in each column.

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('This is column 1')
 
with col2:
    st.write('This is column 2')

In this example, the application is divided into two columns. The first column displays the text 'This is column 1', and the second column displays 'This is column 2'. This allows you to create more complex layouts and improve the user experience of your application.

Streamlit Form

Streamlit forms are a way to group related input widgets together and have their values submitted all at once. This is particularly useful when you have several inputs that should be submitted together.

import streamlit as st
 
with st.form(key='my_form'):
    text_input = st.text_input(label='Enter some text')
    submit_button = st.form_submit_button(label='Submit')

In this example, a form is created with a text input field and a submit button. When the submit button is clicked, all the inputs within the form are submitted together.

Streamlit

Table

Streamlit tables offer a way to display data in a structured format. You can create a table in Streamlit using the st.table function, which takes a data frame or a dictionary as input.

import streamlit as st
import pandas as pd
 
data = {'Name': ['John', 'Anna', 'Peter'],
        'Age': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

In this example, a data frame is created with the pandas library and displayed as a table in the Streamlit application. The table clearly shows the data in rows and columns, making it easy for users to understand.

Streamlit Checkbox

A Streamlit checkbox is a component that allows users to toggle a binary option. It can be used to control the behavior of the application, such as showing or hiding additional information. The checkbox component is defined using the st.checkbox function, which takes a string argument for the checkbox label.

import streamlit as st
 
if st.checkbox('Show details'):
    st.write('Here are the details...')

In this example, when the checkbox labeled 'Show details' is checked, the message 'Here are the details...' is displayed on the screen. This mechanism can be used to control the visibility of additional information based on the user's preference.

Streamlit Text Input

Streamlit text input is a component that allows users to enter a line of text. It can be used to capture user input, such as a search query or a form response. The text input component is defined using the st.text_input function, which takes a string argument for the input label.

import streamlit as st
 
title = st.text_input('Movie title', 'Life of Brian')
st.write('The current movie title is', title)

In this example, a text input field labeled 'Movie title' is created with a default value of 'Life of Brian'. The value of the text input field can be accessed and used in the application, as shown by the message that displays the current movie title.

Streamlit Markdown

Streamlit markdown is a component that allows you to display text formatted according to the Markdown syntax. This can be used to display headings, bold or italic text, lists, links, and more. The markdown component is defined using the st.markdown function, which takes a string argument containing the Markdown-formatted text.

import streamlit as st
 
st.markdown('## This is a header')
st.markdown('This is **bold** text')

In this example, a header and some bold text are displayed using the Markdown syntax. This allows you to create rich, formatted text in your Streamlit applications.

Streamlit Multiselect

Streamlit multiselect is a component that allows users to select multiple options from a list. It can be used to filter data, control the display of information, and more. The multiselect component is defined using the st.multiselect function, which takes a string argument for the input label and a list of options.

import streamlit as st
 
options = st.multiselect(
    'What are your favorite colors',
    ['Green', 'Yellow', 'Red', 'Blue'],
    ['Yellow', 'Red']
)
st.write('You selected:', options)

In this example, a multiselect field labeled 'What are your favorite colors' is created with four options. The user can select multiple options, and the selected options are displayed on the screen.

Streamlit Container

Streamlit containers are a way to group related components together. They can be used to create more complex layouts and to manage the display of components in a

more organized manner. The container component is defined using the st.container function, which does not take any arguments.

import streamlit as st
 
with st.container():
    st.write('This is inside the container')
    st.button('Click me')

In this example, a container is created with a text and a button component inside it. The components inside the container are displayed together, allowing you to create more complex layouts and improve the organization of your application.

Best Practices for Using Streamlit Components

When incorporating Streamlit components into your applications, it's crucial to adhere to certain best practices to ensure optimal performance and user experience. Here are some key points to consider:

User Experience: Always prioritize the user experience. Organize your components in an intuitive manner and provide clear labels and instructions. This not only enhances usability but also adds context to each component.

## Good practice: clear labels and instructions
st.markdown('### Please enter your details')
name = st.text_input('Name')
email = st.text_input('Email')

Performance: Be aware of the potential performance implications of your components. Certain components, such as forms and tables, can be resource-intensive and may slow down your application if not used judiciously. Strive to optimize your components and use them sparingly to maintain a smooth and responsive user experience.

## Bad practice: large table
st.table(large_dataframe)
 
## Good practice: optimized table with pagination
for i in range(0, len(large_dataframe), 100):
    st.table(large_dataframe[i:i+100])

Testing: Ensure to thoroughly test your components. They should work as expected and handle user input gracefully. This includes testing for edge cases and handling errors appropriately.

## Good practice: error handling
try:
    result = some_function(user_input)
except SomeError as e:
    st.error(f'An error occurred: {e}')

Real-world Applications of Streamlit Components

Streamlit components find their use in a plethora of real-world applications, enhancing interactivity and user engagement. Here are a few examples:

Data Science: Streamlit components are often used to create interactive dashboards and data exploration tools. Users can use sliders, checkboxes, and dropdowns to filter and manipulate data, while tables and charts are used to display the results.

## Example: data exploration tool
selected_data = data[st.multiselect('Select columns', data.columns)]
st.line_chart(selected_data)

Machine Learning: Streamlit components are used to create interactive model exploration tools. Users can input parameters, run models, and view results all within the same application. This makes it easier to understand and interpret machine learning models.

## Example: model exploration tool
params = st.sidebar.slider('Model parameter', 0, 10)
model = train_model(params)
st.write('Model score:', model.score(X, y))

Web Development: Streamlit components are used to create dynamic, interactive web applications. From simple forms and buttons to complex layouts with multiple containers, Streamlit components offer a wide range of possibilities for creating engaging web experiences.

## Example: web application
with st.container():
    st.header('Welcome to my app!')
    if st.button('Click me'):
        st.balloons()

In all these applications, the key is to use Streamlit components in a way that enhances the user experience, makes the application more interactive, and allows the user to engage with the data in a meaningful way.

Real-world Applications of Streamlit Components

Streamlit components are used in a wide range of real-world applications. For example, in data science, they are often used to create interactive dashboards and data exploration tools. Users can use sliders, checkboxes, and dropdowns to filter and manipulate data, while tables and charts are used to display the results.

In machine learning, Streamlit components are used to create interactive model exploration tools. Users can input parameters, run models, and view results all within the same application. This makes it easier to understand and interpret machine learning models.
In web development, Streamlit components are used to create dynamic, interactive web applications. From simple forms and buttons to complex layouts with multiple containers, Streamlit components offer a wide range of possibilities for creating engaging web experiences.

Conclusion

Streamlit components are the building blocks of interactive data science applications. They offer a wide range of possibilities for creating dynamic and engaging user interfaces, from simple buttons and checkboxes to more complex forms and tables. By understanding and effectively using these components, you can create powerful applications that allow users to interact with data in meaningful ways.

Whether you're a data scientist looking to create an interactive dashboard, a machine learning engineer wanting to build a model exploration tool, or a web developer aiming to create a dynamic web application, Streamlit components have got you covered. Remember to always consider the user experience, be mindful of performance, and thoroughly test your components. With these best practices in mind, you're well on your way to mastering Streamlit components.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly.

(opens in a new tab)

Frequently Asked Questions

1. What are the disadvantages of Streamlit?

While Streamlit is a powerful tool for building interactive data science applications, it does have a few limitations. For instance, it's not designed for creating complex multi-page applications, and it doesn't support user authentication or session management out of the box. Additionally, since Streamlit runs on the server side, it may not be as responsive as client-side JavaScript applications for large datasets or complex computations.

2. How do you structure a Streamlit app?

A Streamlit app is structured around the concept of "script execution." When a user interacts with a widget, the entire script is rerun from top to bottom. This makes the code simple and linear, similar to a traditional Python script. However, you can also use functions and classes to structure your code, and you can use the st.cache decorator to cache the results of long-running computations and prevent them from being rerun unnecessarily.

3. How can I optimize the performance of my Streamlit app?

There are several ways to optimize the performance of your Streamlit app. One is to use the st.cache decorator to cache the results of long-running computations. Another is to use the st.beta_columns function to create multiple columns and parallelize the rendering of your components. You can also use the st.experimental_memo function to memoize function calls and avoid unnecessary recomputations. Finally, be mindful of the size of your data and the complexity of your computations, and consider using a more powerful server if necessary.