can I display custom javascript in streamlit web app

Question

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

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.components.v1 as components

components.html(html_string)

but this puts it in <iframe>

Doc: Components API reference

---

Minimal working example

import streamlit as st
import streamlit.components.v1 as components

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>
'''

components.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 complex method which may need code in TypeScript.

See videos in doc: Create a Streamlit Component