Text elements are components in a web app that display text, like titles, headers, and paragraphs, helping to organize and present information clearly.
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.
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:
It usually appears at the start of a Streamlit web app.
st.title(body, anchor=None)
body: This is the text to be displayed.
anchor: This is an optional parameter that can be accessed with an anchor in the URL.
It displays the text in header formatting.
st.header(body, anchor=None)
body: This is the text to be displayed.
anchor: An optional parameter can be accessed with an #anchor in the URL.
It displays the text in subheader formatting.
st.subheader(body, anchor=None)
body: It’s the text to be displayed.
anchor: An optional parameter can be accessed with an #anchor in the URL.
It displays the string formatted as Markdown.
st.markdown(body, unsafe_allow_html=False)
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 to True, you may disable this behavior.
It displays the text in small font. It should be used for captions, footnotes, asides, and sidenotes.
st.caption(body, unsafe_allow_html=False)
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 to True, you may disable this behavior.
It displays a code block with optional syntax highlighting.
st.code(body, lanhguage ="python")
body: The string is displayed as code.
language: This is the code language in which code is written.
It displays the text with preformatted and fixed-width text.
st.text(body)
body: This is the string to be displayed.
It displays mathematical expressions formatted as LaTeX.
st.latex(body)
body: This is the string expression to be displayed.
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
''')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.
Haven’t found what you were looking for? Contact Us
Free Resources