Hello there đź‘‹

Thanks for stopping by! We use cookies to help us understand how you interact with our website.

By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.

  1. Contents
  2. Part 1: Setup and Architecture
  3. Part 2: Make a Slider Widget

Create a Component

push_pin

Note

If you are only interested in using Streamlit Components, then you can skip this section and head over to the Streamlit Components Gallery to find and install components created by the community!

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!

With Streamlit Components you can add new features to your app in the following ways:

  • Create your own components to use in place of existing Streamlit elements and widgets.
  • Create completely new Streamlit elements and widgets by wrapping existing React.js, Vue.js, or other JavaScript widget toolkits.
  • Render Python objects by constructing HTML representations and styling them to fit your app's theme.
  • Create convenience functions to embed commonly-used web features like GitHub gists and Pastebin.

Check out these Streamlit Components tutorial videos by Streamlit engineer Tim Conkling to get started:

Part 1: Setup and Architecture

Part 2: Make a Slider Widget

Previous: Intro to custom componentsNext: Publish a Component
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.