Up next in 10
Streamlit with Python: How to Display Text in Streamlit
In this tutorial, we will learn how to add text to your Streamlit application and explore the different commands available for displaying text and formatting.
Streamlit with Python: How to Display Text in Streamlit
Article: https://www.usandopy.com/en/artigo/displaying-text-with-streamlit/
💖 Donate and help us create more amazing content!
🙌 Every contribution makes a difference!
☕ Buy me a coffee: https://buymeacoffee.com/usandopython
⚡️ Connect with me on:
Instagram: https://www.instagram.com/pybeginners/
Twitter: https://x.com/joaofuti_
LinkedIn Newsletter: https://www.linkedin.com/newsletters/pybeginners-7267881715929415681/
Website: https://www.usandopy.com/en
Thread: https://www.threads.net/@pybeginners
Show More Show Less View Video Transcript
0:00
hello guys welcome back to the channel
0:02
John here so today we are going to know
0:04
how we can work with test in streaml we
0:08
will learn in this tutorial how to add
0:10
test to your streaml application and to
0:12
explore different commands okay
0:14
available to display test and formatting
0:16
the test in streamllet so as we know in
0:19
the past video okay we stopped from here
0:21
so let's come back here so now we have
0:23
streaml imported in our in our script
0:26
okay so the next thing that we need to
0:27
do is so first let's work with the main
0:30
function for displaying test in
0:31
streamllet okay so the main function to
0:34
display test in streamllet is called uh
0:36
write okay is the write function which
0:38
is this one so how to use this white
0:41
function so in order to use this write
0:42
function is very easy okay you just come
0:44
here so since we imported streaml as st
0:47
so we just need to come here okay and
0:49
say st dot write something like this
0:52
okay then the test will be showing will
0:54
be displayed in our app uh what is the
0:58
right function so this right function
0:59
okay is a very versatile function which
1:01
is used to add almost uh any type of
1:04
element to your application okay such as
1:06
string charts and uh charts like mplot
1:11
lily plot uh uh plotly even alter okay
1:15
so this right function is very useful so
1:18
you'll be using you'll find yourself
1:19
using this right function many times
1:21
okay so it's that's why is the most
1:24
commonly used uh function in streamllet
1:27
so even data frames you can use it to
1:29
display data frames okay in streamllet
1:32
by using write function so okay now
1:34
let's show some test in our app okay so
1:37
in order to show the test as you can see
1:39
okay I call this st.right okay so if I
1:42
come here in our browser if I run this
1:45
guy okay if I refresh as I can as you
1:48
can see it's not showing any anything
1:50
okay so in order to show anything so you
1:52
need to do something like this okay here
1:53
inside of the right you will give the
1:55
test that you want it to display so
1:56
let's say something like that
1:59
hello
2:00
hello and if I do something like this
2:03
hello let's let's what let's
2:06
learn streamllet let's learn streaml
2:09
let's learn streaml if I save this and
2:11
if I come here if I refresh and boom as
2:15
you can see is showing hello let's learn
2:17
streaml okay so this is how you can add
2:19
any component inside of your streaml app
2:21
okay this is how you can display the
2:23
test in streaml app so apart of the
2:26
right uh function okay we can also add
2:29
title into our streaml application
2:31
because in order to add titles in our
2:33
streaml application we use the st okay
2:37
dot title okay we use the title function
2:40
so this title function is used to
2:43
display a title inside of our streaml
2:47
application okay so
2:50
uh in order to show the title also is
2:52
like this okay so uh basically basically
2:55
I used to see streamlit like a document
2:57
like a word document okay so where you
2:58
need to format very well your document
3:01
so this is if you look streamlit as a
3:04
document you'll find it's really really
3:06
easy to work with it okay because it's
3:09
really really easy stream later so let's
3:13
add it so let's say
3:15
and
3:17
welcome to this tutorial welcome to this
3:20
tutorial okay if I save this then let's
3:22
come here and refresh boom as you can
3:25
see welcome to this tutorial as you can
3:27
see okay the title is it display
3:30
different than a simpler test okay
3:32
because the title logic it need to be
3:35
like bold that's why you can see here
3:38
okay it is bold and showing like more if
3:42
letters than this normal test okay so
3:45
okay apart of title we can add add also
3:47
like header okay into our application so
3:51
the headers can be something like this
3:52
okay st dot
3:55
header header open and close here we can
3:59
give something like this like and this
4:04
is header this is rather safe and let's
4:08
check now if I align
4:10
this as you can see so this kind is more
4:14
small than this one and this is normal
4:16
test perfect so we can add al sub header
4:20
is a part of header so for two sub
4:23
header we can see st dot sub header sub
4:27
header open and close here inside we
4:31
need to give something like this okay
4:32
for anything okay this is sub header
4:36
this is sub header save okay come here
4:39
and boom as you can see we have this sub
4:42
header okay so this is the title this is
4:44
header and this is sub header and this
4:46
is uh this is what Okay this is like
4:49
normal test okay perfect save okay if I
4:52
come here on the top save this and the
4:55
good thing that I like about streaml is
4:57
like it's a portal so markdown okay so
4:59
markdown is very useful okay component
5:02
to use even to format your apps so in
5:06
order to use markdown formatting style
5:08
is that is this okay we just need to
5:10
call stark
5:11
mark markdown oh I wrote it well
5:15
markdown open and close here inside okay
5:18
we can use any markdown format that we
5:21
you know okay you know even see if you
5:23
don't know very well how to format
5:25
things by using markdown you can always
5:27
search on Google or even by using CHP
5:30
like how to format the test by using
5:32
markdown something like that okay so
5:34
most of option of markdown here in
5:37
summit will use will work okay so now
5:40
let's give some kind of simple example
5:42
okay so in order to work with markdown
5:44
it must be inside of streams okay so it
5:46
must be something like this so now let's
5:49
try to show like a B test by using
5:51
markdown so in order to show board test
5:53
and markdown we all know that we need to
5:55
use like uh asterisk okay asterisk
5:59
asterisk something like this then here
6:01
inside of these two axis we can say
6:03
something like this okay for bold text
6:06
okay bold text save and if I come here
6:10
if I refresh as you can see it's showing
6:13
like a bold text okay this is by using
6:17
uh markdown format okay so let me use
6:20
some comma let me try Another example
6:22
more for if you want to show italic so
6:24
italic we knows that like two
6:26
accessories is then inside we can say we
6:29
can write whatever we want to give an
6:31
italic text italic text if I save this
6:34
let me run here refresh boom as you can
6:36
see in order to show the italic text
6:38
okay it must be inside of two asterics
6:41
something like this so just let me give
6:43
comma and apart of this okay we can also
6:46
display like links okay uh that's why
6:49
markdown is very useful so like let's
6:51
say something like this
6:53
and if I open it this one okay in order
6:58
to use link which we can see like okay a
7:01
link we need to show the test okay so
7:04
this is the test so now we need to open
7:07
and here is where we are going to give
7:10
the link okay so let's say something
7:12
like this uh for which example that
7:15
again okay let's say
7:18
https dot
7:20
to hash okay then let's say
7:26
okay i like www okay
7:31
www.andoy.com so if I save this then if
7:33
I come here and let me refresh this guy
7:36
boom as you can see okay bold test
7:38
italic test and a link so this is a link
7:40
so if I click on this link it's going to
7:42
take me to different page okay so then
7:44
it will open that link that we just
7:46
click on okay but as I said my internet
7:48
right now is very slow so that's why
7:49
it's taking a long time just to open in
7:51
a simple past okay let me close this guy
7:54
so this is how you can add text in
7:57
streamlate okay apart of that we can
7:59
also add caption in streamllet easily
8:02
okay so in order to add caption we can
8:05
do something like this okay sd dot
8:08
caption
8:10
s.aption open and
8:12
close so how to add a caption so let me
8:15
do something like this this didn't say
8:17
uh explanation
8:19
explanatory
8:21
explanatory caption explanatory caption
8:24
save this if I come here okay let me
8:28
refresh and boom as you can see we have
8:30
kind of caption here
8:33
okay is very easy by using streaml
8:36
okay so uh for example okay you are
8:40
uh creating one code one app okay that
8:44
you need to show to display some code
8:45
okay so in order to show code is very
8:47
easy also in stream just do something
8:49
like this st dot code open and close and
8:53
uh let's open three times okay one two
8:55
three okay 1 2 3 perfect and uh just
8:59
come here okay here inside you can start
9:01
writing your own codes okay okay let me
9:03
instead of def add okay def add okay
9:07
let's add like a Python code to add two
9:11
two numbers okay let's say the add dot
9:14
and come down come here and let's say
9:16
return
9:18
return what this return is bad return
9:22
okay I'm going to return a plus b okay
9:28
then let's say something like this okay
9:30
print open and close what add okay the
9:34
add function let's call that function
9:36
add what open and close let me add
9:39
two
9:41
comma three okay save now if I come here
9:44
if I run this one boom as you can see it
9:47
just add the code here okay this is the
9:49
code that we just entered okay so that's
9:51
why Streamlink is very useful okay and I
9:54
can come here and just if I click this
9:56
it will copy the code and if I come here
9:58
for example let me give some kind of
9:59
space and if I paste boom this is the
10:02
code that I just copy from there okay so
10:05
that's this is how you can add the code
10:07
in streaml okay so the last one okay
10:12
which is also very important we can for
10:15
example if you want if we have if we are
10:17
working with some formula okay like
10:20
mathematics formula something like that
10:22
okay we can do something like this ST
10:26
latex okay open and close and here
10:30
inside okay let's use the this guy okay
10:35
one two okay three okay one two three
10:38
perfect then here
10:41
inside okay oh this this a must go out
10:45
because we are supposed to use a regular
10:46
form regular expressions then for let's
10:50
say the E equal okay e equal uh-oh e
10:55
equal MC if I do like this where is it
11:00
where is the circumflex oh circumlex is
11:03
in Portuguese in English I used to
11:05
forget the name of it uh where is it
11:07
where is it where is it unfortunately I
11:09
don't have it oh my god how can I forget
11:12
it oh I found it okay
11:16
MC2 okay if I save this guy and if I
11:20
come here and if I refresh boom as you
11:23
can see now it formatted very well and
11:26
it's very nice as you can see okay so
11:29
this is how you can work with text in
11:31
Python stream okay it's very easy so
11:33
there are more options that you can
11:34
explore okay while creating your app
11:36
okay but for us now let's stay here okay
11:40
this is just kind of simple example so
11:42
that you can understand how you can work
11:44
properly with
11:45
streaml so we'll stay here in the next
11:48
video we'll try to explore more streaml
11:50
okay my name is and see you in the next
11:52
video bye-bye