Create a Streamlit Component

Starting with version 0.63.0, developers can write JavaScript and HTML “components” that can be rendered in Streamlit apps. Streamlit Components can receive data from, and also send data to, Streamlit Python scripts.

Streamlit Components let you expand the functionality provided in the base Streamlit package. Use Streamlit Components to create the needed functionality for your use case, then wrap it up in a Python package and share with the broader Streamlit community!

Types of Streamlit Components you could create include:

  • Custom versions of existing Streamlit elements and widgets, such as st.slider or st.file_uploader

  • Completely new Streamlit elements and widgets by wrapping existing React.js, Vue.js, or other JavaScript widget toolkits

  • Rendering Python objects having methods that output HTML, such as IPython __repr_html__

  • Convenience functions for commonly-used web features like GitHub gists and Pastebin

Check out this Streamlit Components Tutorial video by Streamlit engineer Tim Conkling to get started:

Note

The remainder of the documentation in this section is for users that want to develop Streamlit Components or are generally interested in the Streamlit project from a developer/contributor perspective.

If you are only interested in using Streamlit Components, then you can skip these sections and head over to the Streamlit Components Gallery to see examples created by the community!