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.
My use case is to draw a grid like style and allow formatting of the boxes.
Iām using allow_unsafe_html to get rid of the hamburger menu to deploy my apps, to center my images and text(and have some more control over theming of individual elements) and most importantly to implement hcaptcha for my sign-up forms to prevent bot abuse.
So very glad that itās not being deprecated haha 
Iām using allow_unsafe_html to adjust padding and margin of text.
Hello Streamlit team,
I am currently building an app where the user can input a single string or paragraph. In the backend, I ran some analysis to identify and mark certain words. My goal is to output the exact same paragraph back to the app window but I want to add custom color, highlights or backgrounds to marked words. Also, on those words, I want to offer suggestions for other words when the user clicks on the word.
I have been having trouble creating something like this with the current set of Streamlit features.
Thank you for Streamlit!
DD
To create my own custom sidebar
Hello,
Iām using unsafe_allow_html=True to display tables with line breaks (using <br />).
This is literally the only way I could find to display such tables.
And now I have to somehow display a table with MultiIndexā¦ Guess Iāll have to use pure HTML for this one.