I am using HTML to format html data that comes from a json api.
Iād like to show the output of tk.keras.model_summary, which includes multiple spaces on each line to ensure the various elements align. st.write collapses contiguous whitespace chars to a single one, and this messes up the display. Example output is
Model: "single_layer_network"
Layer (type) Output Shape Param #
__________________________________________________________________________________________
dense (Dense) (None, 1) 28
activation (Activation) (None, 1) 0
__________________________________________________________________________________________
Total params: 28
Trainable params: 28
Non-trainable params: 0
If I surround each string with <pre>... </pre> and use the unsafe_allow_html=True option, this whitespace gets preserved, otherwise collapsing whitespaces creates an unreadable/misaligned output
I just realized I can just use st.text for āverbatimā text output that preserves whitespace, so for the above use case I donāt need html
2 Likes
Hey @rutvik! For this use-case I just released a little Streamlit Component called st-annotated-text: https://github.com/tvst/st-annotated-text
LMK what you think!
5 Likes
Thanks a lot Added your component to the tracker, since I saw this need pop multiple times on the forum 
great component @thiago !
(Iām also tempted to try your jsbuilder lib to pass JS events from Python to React components 
)
3 Likes
I was going to show my Latent Dirichlet Allocation model which is interactiveā¦ https://pyldavis.readthedocs.io/en/latest/readme.html#usage you can save the file as an html an keep all the interactivity ā¦ should I just use Dash?
Hi,
Iām using it to display tables with custom formatting (header colors, date formats, hover, highlighting outliers, etcā¦). Iām building the html from pandas:
html_string = '''
<html>
<head><title>HTML Pandas Dataframe with CSS</title></head>
<link rel="stylesheet" type="text/css" href=""/>
<body>
{table}
</body>
</html>.
'''
table_html = df.style.hide_index.set_table_styles(styles).format(format_vals).applymap(function).render().
st.write(html_string.format(table=table_html), unsafe_allow_html=True)
1 Like
Yes, I was using HTML along with CSS to Animate and Style the Title Heading of My Web App created using Streamlit!!
Title_html = """
<style>
.title h1{
user-select: none;
font-size: 43px;
color: white;
background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, rgb(0,255,0) 14.28%, rgb(0,255,255) 21.4%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
background-size: 600vw 600vw;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: slide 10s linear infinite forwards;
}
@keyframes slide {
0%{
background-position-x: 0%;
}
100%{
background-position-x: 600vw;
}
}
</style>
<div class="title">
<h1>RGB Color Classifier</h1>
</div>
"""
st.markdown(Title_html, unsafe_allow_html=True) #Title rendering
Here is a gif for my web app where we see the Rainbow Title Animation
3 Likes
I have an use case where I want to display a pdf file on the left hand side and an html file having a sample extraction from the pdf on the right hand side. Presently itās coming one below the other and I am unable to get them side by side. Is this possible in streamlit with the new horizontal layout option as I had been reading about? Waiting for an answer.
Hey @Myntur, I recommand to read this blogpost:
New layout options for Streamlit
Simply do:
col1, col2 = st.beta_columns(2)
Then you can put the contents into the cols.
Something like:
col1.image(pdf)
col2.write(extraction)
2 Likes
Iāve found that injecting markdown links vs using html links exhibit completely different behaviors. Markdown links tend to open the links in a new tab while using html style web links seems to redirect the existing tab. Each behavior has its place. Intersite links and redirects are better served with the html functionality whereas links to outside websites and resources are better served with he markdown style functionality.
Iām not quite web savvy enough to understand the nuances of why the functionality differs between the two options.
The difference being the target attribute of the <a> html tag. Markdown probably specifies a new tab as default. While for html the default is to navigate in the existing tab.
1 Like
Iām showing tables of bugs filtered based on various criteria, and just want the unique bug key to be a link to the bug tracking tool, which we can do by adding a URL prefix.
At the moment the workaround is:
st.markdown(
df.to_html(
...,
escape=False,
formatters={'key': lambda k: f'<a href="https://.../{k}">{k}</a>'},
),
unsafe_allow_html=True,
)
1 Like
Hi Streamlit Team. I am a bit new to this community and to streamlit itself and found it very fascinating and interesting. I am currently working on my MSc project and I am supposed to create an application to model epidemics. The application does not require any user credentials and private data therefore there will no issues concerning tampering with user data. The application runs on pure theological models and will use publically available datasets thus respecting all ethics. In short, user data is not involved and will not be in the future.
-
I am using HTML and CSS to change the look of my application by changing the background colour and introducing Lottie animations on the welcome page.
-
I also have used HTML to implement the āJustifyā alignment to the text used in markdown with the view to give the explanations an even look.
-
and also used them to modify the text on the main page as part of the welcome screen
I shall attach some screenshots to visually deliver what I have stated above.
Streamlit is very useful and is visually very appealing. There is a lot to learn and the more you learn you can create a powerful application but at the same time attending to all the visual aspects.
3 Likes
Welcome to the community @geoffrygeorge
This looks gorgeous 
looking forward to the animated GIF with Lottie 
Fanilo
1 Like
@andfanilo Thank you so much and you have been such a great help with all your important discussions in the community and I have been referring to them and have been using them for my application.
EDIT: In my initial comment, it was supposed to be āepidemiological modelsā rather than theological. A typo there, sorry if anyone misunderstood it.
1 Like
Hi, I am trying to create a custom Streamlit component for my organizationās users to upload their files located in their Google Drives to the Streamlit application. Unfortunately, the Streamlit Custom Component is rendered as an iframe, which means that I cannot use the Google Picker API within my custom component. I tried to work around this by using both st.write, and st.markdown, but both strip my HTML string of <script> tags. Why is this, and what workarounds exist? This is a source of frustration for our users who are required to download their files from Google Drive locally, and then upload them to our Streamlit applications, rather than having our application handle it.
I use this to make custom HTML tables combined with the tabulate library.
My use case it to add custom JavaScript to Bokeh plots. We have plots of data points, and each point has a lot of meta data associated with it. We want to click on outliers and have it show all the information about that data point.
I have realized that by adding a bit of custom JavaScript to a Bokeh plot, which uses its click handler. That JS will write the data into some HTML element. And this is where I need the HTML in Markdown feature, I generate a DIV tag with a given ID attribute. This is then baked into the JS for the Bokeh plot.