I am working on a parking data app using Streamlit library in python 3.7, I want to display the availability of parking spots using custom JavaScript for visualization. Is it possible to display HTML/javascript elements in streamlit web app

I am working on a parking data app using Streamlit library in python 3.7, I want to display the availability of parking spots using custom JavaScript for visualization. Is it possible to display HTML/javascript elements in streamlit web app

• javascript
• python
• streamlit

• good luck. Come back when you get error message. – furas Commented Jun 15, 2021 at 0:08
• @furas I am asking it is possible, I don't seem to find anything about it in Streamlit documentation. – Reda Elmar Commented Jun 15, 2021 at 0:18
• then check source code. – furas Commented Jun 15, 2021 at 0:20
• using Google streamlit add htmlI found How to render already prepared html code with Streamlit? which uses st.markdown(html_string, unsafe_allow_html=True). It think you could use it to add HTML and JavaScript. But in documentation I found Create a Streamlit Component and maybe this can be more interesting. – furas Commented Jun 15, 2021 at 0:32

1 Answer 1

Digging in Google I found:

You can add HTML using

import streamlit as st

st.markdown(html_string, unsafe_allow_html=True)

but this can't add JavaScript.

Forum: How to render already prepared html code with Streamlit?

You can add HTML and JavaScript using

import streamlit.ponents.v1 as ponents

ponents.html(html_string)

but this puts it in <iframe>

Doc: Components API reference

Minimal working example

import streamlit as st
import streamlit.ponents.v1 as ponents

html_string = '''
<h1>HTML string in RED</h1>

<script language="javascript">
  document.querySelector("h1").style.color = "red";
  console.log("Streamlit runs JavaScript");
  alert("Streamlit runs JavaScript");
</script>
'''

ponents.html(html_string)  # JavaScript works

st.markdown(html_string, unsafe_allow_html=True)  # JavaScript doesn't work

To put directly HTML with JavaScript you would need to build Component but it seems more plex method which may need code in TypeScript.

See videos in doc: Create a Streamlit Component