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.
Create an 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 http://localhost:8501 with 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 components.iframe("https://docs.streamlit.io/en/latest")
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.