Text elements are components in a web app that display text, like titles, headers, and paragraphs, helping to organize and present information clearly.
How to add the text elements to the Streamlit Web Interface
Key takeaways:
Streamlit is a user-friendly Python library designed for building interactive web applications quickly and easily.
Text elements like titles, headers, and captions are crucial for creating a clean and organized web app interface.
Using Markdown, you can format text with additional features like emojis and LaTeX expressions to enhance user experience.
Code blocks allow you to display sample code with syntax highlighting, making it easier for users to understand your examples.
The caption function helps to provide context for your text, which can be useful for footnotes or additional information.
Streamlit is an easy-to-use Python library for creating simple web apps. It’s great for quickly building interactive apps without needing a lot of web development knowledge. For instance, creating a fully functional app with sliders, graphs, and interactive widgets can take as little as 10 lines of code! This simplicity has made it a go-to tool for data scientists and analysts looking to prototype and share their work quickly.
Text elements in Streamlit
One of the most important parts of creating a Streamlit app is adding text elements like titles, headers, and captions. In this Answer, we’ll go over the basic text elements in Streamlit and show how to use them to build a clean and readable app.
We’ll import streamlit to use the text elements. To import, we’ll use the following command:
import streamlit as st
A Streamlit web interface has the following text elements:
1. Title
It usually appears at the start of a Streamlit web app.
Syntax
st.title(body, anchor=None)
Parameters
body: This is the text to be displayed.anchor: This is an optional parameter that can be accessed with an anchor in the URL.
2. Header
It displays the text in header formatting.
Syntax
st.header(body, anchor=None)
Parameters
body: This is the text to be displayed.anchor: An optional parameter can be accessed with an #anchor in the URL.
3. Subheader
It displays the text in subheader formatting.
Syntax
st.subheader(body, anchor=None)
Parameters
body: It’s the text to be displayed.anchor: An optional parameter can be accessed with an #anchor in the URL.
4. Markdown
It displays the string formatted as Markdown.
Syntax
st.markdown(body, unsafe_allow_html=False)
Parameters
body: This is the text to be displayed. It also supports emoji shortcodes and LaTeX expressions.unsafe_allow_html: Any HTML tags encountered in the body are automatically escaped and handled as plain text. By setting this option toTrue, you may disable this behavior.
5. Caption
It displays the text in small font. It should be used for captions, footnotes, asides, and sidenotes.
Syntax
st.caption(body, unsafe_allow_html=False)
Parameters
body: This is the text to be displayed.unsafe_allow_html: Any HTML tags encountered in the body are automatically escaped and handled as plain text. By setting this option toTrue, you may disable this behavior.
6. Code block
It displays a code block with optional syntax highlighting.
Syntax
st.code(body, lanhguage ="python")
Parameters
body: The string is displayed as code.language: This is the code language in which code is written.
7. Preformatted text
It displays the text with preformatted and fixed-width text.
Syntax
st.text(body)
Parameters
body: This is the string to be displayed.
8. LaTeX
It displays mathematical expressions formatted as LaTeX.
Syntax
st.latex(body)
Parameters
body: This is the string expression to be displayed.
Code example
Let’s run the following app to display all text elements on the Streamlit web interface.
import streamlit as st
# Title
st.title ("This is a title")
# Header
st.header ("This is a header")
# Subheader
st.subheader ("This is a subheader")
# Mardown
st.markdown("This is **educative**")
# Caption
st.caption("This is caption")
# Code block
code = '''def func():
"This is a Python Function"'''
st.code( code,language='python')
# Preformatted text
st.text("This is fixed-width text")
# Latex
st.latex(r'''
f(x)=x^2
''')A Streamlit application displaying various text elements
Code explanation
Line 1: We’ll import
streamlit.Lines 3–20: We’ll call the text elements functions to display them on the interface.
In this Answer, we’ve learned how to use basic text elements in Streamlit to make clean and easy-to-read web apps. Once you’re comfortable with these basics, you can create more advanced apps with Streamlit. With Streamlit, you can skip the hassle of traditional web development and dive straight into exciting topics. For example, you can build a data-centric web app to visualize data or create an interactive PDF reader with LangChain. Similarly, with Streamlit, you can easily create a personalized recommendation system and even make an object detection web app with YOLO. In short, Streamlit makes it easy to focus on your ideas and innovations without getting stuck in the technical details of web development.
Frequently asked questions
Haven’t found what you were looking for? Contact Us
What are text elements?
What is Streamlit used for?
How do you add text in Streamlit?
What are the text styles in Streamlit?
Which is better Streamlit or Flask?
Free Resources
Copyright ©2025 Educative, Inc. All rights reserved