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:
💖 Donate and help us create more amazing content!
🙌 Every contribution makes a difference!
☕ Buy me a coffee: https://buymeacoffee.com/usandopython
💖Support this channel
https://www.youtube.com/channel/UCpL2Gru508Z39oPqu1FIg4Q/join
⚡️ 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:01
John here so today we are going to know
0:04
how we can work with test in streamly we
0:08
will learn in this tutorial okay how to
0:09
add test to your swim Le application and
0:12
to explore different commands Okay
0:14
available to display test and formatting
0:16
the test in streamlet 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
streamlet 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 stream L
0:32
okay so the main function to display
0:34
test in stream L is called uh right okay
0:37
it's the right function which is this
0:39
one so how to use this right function so
0:41
in order to use this right function is
0:43
very easy okay you just come here so
0:45
since we imported stream L as SD so we
0:47
just need to come here okay and say STD
0:50
dot WR something like this okay then the
0:53
test will be showing will be display in
0:55
our app uh what is the right function so
0:58
this right function okay very vers
1:00
function which is used to add almost any
1:04
type of element to your application okay
1:06
such as string chart and uh CH like M
1:12
plotly plotly even alter okay so this
1:16
right function is very useful so you'll
1:18
be using you'll find yourself using this
1:20
right function many times okay so it's
1:22
that's why is the most commonly used
1:25
function in stream l so even data frames
1:28
you can use it to display data frames
1:30
okay in stream L by using right function
1:33
so okay now let's show some test in our
1:36
app okay so in order to show the test as
1:38
you can see okay I call this St do WR
1:41
okay so if I come here in our browser if
1:44
I run this guy okay if I
1:46
refresh as I can as you can see it's not
1:48
showing any anything okay so in order to
1:51
show anything so you need to do
1:52
something like this okay here inside of
1:54
the right you will give the test that
1:55
you want it to display so let's say
1:57
something like that hello
2:00
hello and if I do something this hello
2:03
let's let's what let's learn stream lit
2:07
let's Lear stream let's Lear stream if I
2:10
save this and if I come here if I
2:13
refresh and boom as you can see is
2:16
showing hello let's learn stream L okay
2:18
so this is how you can add any component
2:20
inside of your stream L app okay this is
2:22
how you can display the test in stream
2:24
link app so apart of the right uh
2:27
function okay we can also add title into
2:29
our stream L application because in
2:31
order to add titles in our stream L
2:34
application we use the St okay dot title
2:39
okay we use the title function so this
2:41
title function is used to display a
2:44
title inside of our stream L application
2:47
okay
2:49
so H in order to show the title also is
2:52
like this okay so basically basically I
2:55
used to see stream L like a document
2:57
like a Word document okay so where you
2:58
need to format very well your document
3:00
so this is if you look stream lit as a
3:04
document you'll find it really really
3:06
easy to work with it okay because it's
3:09
really really easy stream lat so let's
3:13
add it so let's say and
3:16
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 Tut as you can see
3:28
okay the title is it display different
3:30
than a simple test okay because a title
3:34
logic it need to be like bold that's why
3:36
you can see here okay it is bold and
3:39
showing like more e letters than this
3:43
normal test okay so okay apart of title
3:46
we can add add also like header okay
3:49
into our application so headers can be
3:52
something like this okay St do
3:55
headers header open and close here we
3:59
can give something like this like and
4:02
this
4:04
is header this is header save and let's
4:08
check now if I AR
4:10
this as you can see so this kind of is
4:14
more small than this one okay and this
4:15
is normal test perfect so we can add Sub
4:19
sub header in a part of headers so for
4:22
two subheader we can see s do
4:26
subheader subheader open and close he
4:30
inside we need to give something like
4:32
this okay for let anything okay this is
4:35
subheader this is subheader save okay
4:39
come here and boom as you can see we
4:41
have the sub header okay so this is the
4:43
title this is header and this is sub
4:45
header and this is uh this is what okay
4:48
this is like normal test okay perfect
4:51
save okay if I come here in the top save
4:53
this and the good thing that I like
4:56
about stream L is like it's a portal so
4:58
mark down okay so mark down is very
5:00
useful okay component to use even to
5:04
format your apps so in order to use
5:06
markdown formatting style is this okay
5:09
we just need to call std. Mark Mark down
5:14
oh I wrote it well Mark down open and
5:16
close here inside okay we can use any
5:19
markdown format that we you know okay
5:21
that you know even see if you don't know
5:24
very well how to format things by using
5:26
markdown you can always search on Google
5:28
or even by using gbt like how to format
5:31
the test by using mark down something
5:33
like that okay so most of option of
5:36
markdown here in will will work okay so
5:39
now let's give some kind of simple
5:41
example okay in order to work with
5:43
markdown it must be inside of strings
5:45
okay so it must be something like this
5:47
so now let's try to show like a bol test
5:51
by using markdown so in order to show B
5:53
test and mark down we all know that we
5:55
need to use like uh asteris okay AIS
5:59
asteris something like this then here
6:01
inside of these two aies 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 bold test 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
mode for example if you want to show
6:23
italic so italic we know that like two
6:26
aies then inside we can say we can write
6:30
whatever we want to italic text italic
6:32
text if I save this let me run here
6:35
refresh boom as you can see in order to
6:37
show it like this okay it must be inside
6:40
of two a something like this so just let
6:43
me give comma and aart of this okay we
6:46
can also display like links okay uh
6:49
that's why markdown is very useful so
6:51
let's say something like this and if I
6:55
open it this one okay in order to use
6:58
Link which we can see okay a link we
7:02
need to show the test okay so this is
7:04
the test so now we need to open and here
7:09
is where we are going to give the link
7:11
okay so let's say something like this uh
7:13
for which example let's say h
7:18
https
7:20
do and hash okay then let's say
7:26
okay. I like www okay
7:31
www.and.com so if I save this then if I
7:33
come here and Let me refresh this guy
7:36
boom as you can see okay B test italic
7:38
test and a link so this is a link so if
7:40
I click on this link it's going to take
7:42
me to Different Page okay so then it
7:44
will open that link that we just click
7:46
on okay but as I said my internet right
7:48
now is very slow so that's why it's
7:50
taking long time just to open in a
7:51
simple place okay let me close this guy
7:54
so this is how you can add textt in
7:57
stream L okay apart of that we can add
7:59
so add caption in stream L easily okay
8:03
so in order to add caption we can do
8:05
something this SD do
8:08
caption s. caption open and
8:12
close so how to add caption so let me do
8:15
something like this then say uh
8:18
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:31
kind of caption here
8:33
okay very easy by using stream L okay so
8:38
uh for example okay you are uh creating
8:41
one code one app okay that you need to
8:44
show to display some code okay so in
8:46
order to show code is very easy in just
8:48
do something like this St do code open
8:51
and close and let's open three times
8:54
okay 1 two three okay 1 two three
8:57
perfect and uh just come here okay here
9:00
inside you can start writing your own
9:02
codes okay let me set def add okay def
9:07
add okay let's add like a python code to
9:10
add two two numbers okay let's say they
9:13
add do and come down come here and let's
9:16
say
9:17
return return return what this return is
9:21
bad return okay I'm going to return a
9:25
plus b okay then let's say I'm this okay
9:29
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 comma three okay save now if I come
9:44
here if I run this one boom as you can
9:47
see it just add the code here okay this
9:49
is the code that we just entered okay so
9:51
that's why stream L is very useful okay
9:54
and I can come here and just if I click
9:55
this it will copy the code and if I come
9:57
here for let me give some kind of space
10:00
and if I paste boom this is the code
10:02
that just copy from there okay so that's
10:06
this is how you can add the code in
10:08
stream L okay so the last one okay which
10:12
is also very important we can for
10:15
example if you want if we have if you
10:17
are working with some formula okay like
10:19
a mathematics formula something like
10:22
that okay we can do something like this
10:24
St do
10:26
latex okay open and close and and uh
10:30
here inside okay let's use the this guy
10:34
okay one two okay three okay one two
10:37
three perfect then H
10:41
inside okay oh this this a must go out
10:45
because we are supposed to use regular
10:46
form regular Expressions then for let's
10:50
say e equal okay
10:53
eal oh e equal MC if I do like this uh
10:59
what is it what is the sybol I can see
11:01
circlex oh circlex is in Portuguese in
11:04
English I used to forget the name of it
11:06
what is it where is it what is it
11:08
unfortunately I don't have it oh my God
11:11
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 formated very well and
11:26
very nice as you can see okay so this is
11:29
how you can work with test in Python
11:31
streamlet okay it's very easy so there
11:33
are more option that you can explore
11:34
okay while creating your app okay but
11:37
for us now let's stay here okay this is
11:40
just kind of simple example so that you
11:43
can understand how you can work properly
11:44
with stream
11:45
l so we'll stay here in the next video
11:48
we'll try to explore more stream L okay
11:50
my name is and see you in the next video
11:52
bye-bye