Streamlit Components Launch 🚀

Custom Components
1

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
2

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

4 Likes
3

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

4

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
6

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
7

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

8

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

9

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.

10

Hey @youozhan, you can try my Streamlit Component tutorial, it’s an example of building your own interactive slider which reruns the Streamlit script on mouse release only. You’re then free to style it the way you want, and reuse this workflow for any other Streamlit widgets.

Ping me back if you have any trouble with this

Fanilo

3 Likes