Developer docs for the Streamlit Components beta (This is a publicly viewable page)
Contains a wheelfile, templates to get started with, and several example components.
Contains a wheelfile, templates to get started with, and several example components.
Custom Components is a Streamlit feature that's currently in beta. It enables developers to write JavaScript and HTML "components" that can be rendered in Streamlit apps. Components can receive data from, and also send data to, Streamlit Python scripts.
What you can do
better_slider
: if you don't like Streamlit's st.slider
widget, for example, you can create your own - or wrap another widget toolkit's slider implementation.webcam
: Stream captured video from the browser back to Pythonfolium
: Render leaflet.js maps using the Folium Python library.google_analytics
: Add an invisible Google Analytics component to track page views.What you can't do
grid_layout
Components can't "contain" (or otherwise communicate with) other components.dark_mode
A component can't modify the CSS that the rest of Streamlit uses.remove_streamlit_hamburger_menu
A component can't add or remove other elements of a Streamlit app.unzip
(to unzip the file above)node + npm (or yarn)
(to build and serve the component)components_beta.zip
$ cd components_beta/template
$ python3 -m venv venv # create new python venv
$ . venv/bin/activate # activate the venv
$ pip install ../streamlit-0.62.1-py2.py3-none-any.whl # install the Streamlit beta
$ cd components_beta/template/my_component/frontend
$ npm install # Initialize the project, and install npm dependencies
$ npm run start # Start the Webpack dev server