Prerequisite: make sure you have followed the Project Setup before going further.
The easiest way of solving this problem is by using
components.html. The function renders any frontend code inside an iFrame.
app.py file at the root of the project, next to
setup.py. The file will act as our main Streamlit script.
import streamlit.components.v1 as components # Import Streamlit
# Render the h1 block, contained in a frame of size 200x200.
components.html("<html><body><h1>Hello, World</h1></body></html>", width=200, height=200)
Run the file as a Streamlit app with
streamlit run app.py. If your environment is correctly defined, a new browser should open on
Hello world as a header.
If you only need static rendering of frontend code (HTML/CSS/JS)—with no communication from HTML back to Streamlit—then
components.html will fit the bill perfectly. Many Python packages provide an HTML render or
_repr_html of their objects you can pass this to.
There’s also a
components.iframe in case you want to embed an external website into Streamlit, such as
We expect to implement bidirectional dataflow from Python to the frontend though, which is not possible with this solution. The rest of the tutorial focuses on creating a proper custom component.
As we proceed, be sure to keep
streamlit run app.py running. We’re programming in Streamlit, so all the changes in Python or frontend will be updated in live on the browser.