Streamlit Components Launch 🚀

Hey Community :wave:,

We’re excited to announce our new Streamlit Components API - releasing the new superpower of being able to use and create community driven elements and widgets! Here’s a blog post where @Adrien_Treuille discusses Components in more detail.

Below are some helpful tips and resources for getting started with Components.

:bullettrain_front: Getting Started & Using Components

:building_construction: Building Components

  • Take a look at our component-template repo on GitHub
  • If you’d like help building your component from the community, share it under the “Show the Community!” category with a (WIP) in the title. [Ex: Component: Upload Multiple Files (WIP)]

:handshake: Sharing

  • If you have a Component you’d like to share - feel free to post it within the “Show the Community!” category with the tag “custom-components”.
    • Note: if it’s still a work in progress and you’d like feedback leave a (WIP) in the title so the community can help.
  • We’d also :heart: to feature your Component on our Components Gallery page. If interested feel free to let us know.
  • Here are some recommended guidelines for sharing your component:
    • GitHub (or other hosting) repository is public with license clearly marked
    • Component is published on PyPI so users can easily run pip install my-component. While not a requirement per se, the recommended naming convention is streamlit-<component name>
    • A README and documentation explaining why a user would want to use the component, ideally with screenshots, examples, docstrings, etc.
    • A high-quality image or gif of the Component for the gallery.
  • Here’s an example Component showing best practices for sharing.

:face_with_monocle: Questions

  • If you a question while using or building a Component, feel free to create a topic in the questions category.
    • Note: we recommend reaching out directly to the creator on the Component’s repository if you have questions about a specific Component.

:hugs: Have fun!

  • Excited to see what everyone thinks and looking forward to building Components together!
12 Likes

hey, great feature, congrats, hope to build something interesting with it asap

4 Likes

Hi, is there any example of how to create components with javascript?
Thank’s

In terms of building a bi-directional component, there are two main resources:

documentation: https://docs.streamlit.io/en/stable/develop_streamlit_components.html#create-a-bi-directional-component

code template:

4 Likes

Hi - would it be easy to embed plotly FigureWidget using this? I don’t 100% understand the components, but am trying to get my head around it, will likely try and learn some JS or React to have a play too.

3 Likes

Anyone who’s interested in the above about Plotly FIgureWidget, it’s being discussed here.

Hi, is there a more detailed documentation about how to “Custom versions of existing Streamlit elements and widgets”?

Hi @youozhan, welcome to the Streamlit community!

There isn’t documentation about that. Our intent was to highlight that even though st.slider already exists, it doesn’t mean you can’t make a component with your own version of a slider.