Enhancing Streamlit Apps with Custom HTML and CSS
Streamlit is a powerful framework that makes building and deploying data-driven web applications using Python really easy. Because of its simplicity and out-of-the-box features, developers can quickly create interactive dashboards and applications without needing to worry about complex front-end development. On the other hand, one of the limitations of Streamlit is its somewhat restricted ability to customize the appearance of apps.
This would elevate the appearance of your Streamlit applications to an engaging, eye-catching level. This blog post will help you learn how to enhance your Streamlit apps using custom HTML and CSS in order to present a more polished user experience
Why Customize Streamlit Apps?
While Streamlit does offer a range of built-in components and themes, custom HTML and CSS provide developers with the ability to:
- Personalize Design: Tailor the look and feel of your app to suit your brand identity.
- Enhance User Experience: Improve navigation and layout to make the app more intuitive.
- Stand Out: Your application will look different from other standard Streamlit apps.
- Implement Unique Features: Add design elements that may not be natively supported by Streamlit.
Getting Started with Custom HTML and CSS in Streamlit
Before diving into customization, ensure that you have Streamlit installed. You can install it using:
pip install streamlit
Now, let’s dive into some techniques for embedding custom HTML and CSS into your Streamlit app.
1. Using Streamlit's st.markdown() Method
The most straightforward method of adding custom HTML and CSS in Streamlit is by using the st.markdown() method. This method enables you to add raw HTML and CSS within your app.
Usage:
import streamlit as st# Adding custom HTML and CSSst.markdown(
<style>
.custom-title {
font-size: 36px;
color: #4CAF50;
text-align: center;
font-family: ‘Arial’;
}
</style>
<h1 class=’custom-title’>Welcome to My Streamlit App</h1>
“””,
unsafe_allow_html=True
)
Key Points:
The argument unsafe_allow_html=True is necessary to display custom HTML and CSS.
Be aware of any potential security issues when using custom HTML on production deployments.
2. Inline External CSS Files
If you have a styles.css file elsewhere on your system, you can import it as part of your Streamlit app by simply applying the same kind of st.markdown() call.
Example:
import streamlit as st
#
# Load CSS from an external file
with open(“styles.css”) as f:
st.markdown(f”<style>{f.read()}</style>”, unsafe_allow_html=True)
This again makes your code nicely structured and easy to maintain.
Ready to Enhance Your Streamlit Apps with Custom HTML?
Take your Streamlit applications to the next level with stunning HTML customizations. From dynamic designs to tailored functionality, we can help you create intuitive, user-friendly apps.
3. Including Custom HTML Elements
Streamlit supports the addition of custom HTML elements like tables and buttons and links, which combining HTML with CSS creates interactive elements.
nst.markdown(
“””
<div style=”background-color: lightblue; padding: 10px; border-radius: 5px;”>
<h2 style=”text-align: center; color: white;”>Custom Box with CSS Styling</h2>
<p style=”color: black;”>This is a custom content box styled with CSS.</p>
</div>
“””,
unsafe_allow_html=True
)
4. Using Streamlit Components
For more advanced customization, consider using Streamlit components such as st.components.v1.html(). This method provides greater flexibility for embedding complex HTML and JavaScript.
Example:
import streamlit as st
import streamlit.components.v1 as components
# Embed a simple custom HTML element
components.html(
“””
<div style=’background-color:yellow; padding:20px;’>
<h1>Hello from Custom HTML Component!</h1>
</div>
“””,
height=200
)
5. Customizing the Sidebar
The Streamlit sidebar is a key part of many applications. Customizing it can improve navigation and visual appeal.
st.sidebar.markdown(
“””
<style>
.sidebar .sidebar-content {
background-color: #f0f0f5;
}
</style>
“””,
unsafe_allow_html=True
)
st.sidebar.title(“Customized Sidebar”)
By adding unique design elements and colors, you can make the sidebar more engaging and easier to navigate.
6. Styling Streamlit Widgets
By default, Streamlit widgets have a standard design. You can apply custom CSS to style them.
Example:
st.markdown(
“””
<style>
input[type=”text”] {
border: 2px solid blue;
padding: 5px;
}
</style>
“””,
unsafe_allow_html=True
)
user_input = st.text_input(“Enter your name:”)
7. Using Bootstrap for Advanced Styling
Adding more flair to your app’s design is also possible through the use of Bootstrap, one of the popular CSS frameworks, by including its components and responsive layouts by embedding it through a CDN..
Example:
st.markdown(
“””
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<div class=”alert alert-success” role=”alert”>
This is a Bootstrap-styled alert box!
</div>
“””,
unsafe_allow_html=True
)
Best Practices for Using Custom HTML and CSS in Streamlit
- Maintain Readability: Keep your HTML and CSS code organized and well-commented.
- External Stylesheets: Store CSS in separate files for better maintainability.
- Security Considerations: Be cautious with unsafe_allow_html=True to avoid security vulnerabilities.
- Cross-Browser Compatibility: Test your app on different browsers to ensure consistent styling.
- Performance Optimization: Avoid heavy CSS or complex layouts that may slow down the app.
- Responsive Design: Ensure that your app is accessible and user-friendly on various screen sizes and devices.
Conclusion
Instead, by including custom HTML and CSS, you will amplify the way your Streamlit apps interact and look-a-like. Such a customizing will even facilitate improving the user engagement but allows you to create professional-level applications based on specific requirements. Techniques such as embedding external stylesheets, Bootstrap or customized widgets can transform a simple app into something inviting and interactive. Try these techniques today for your Streamlit apps.