In the ten months since Streamlit was released, the community has created over 250,000 apps for everything from analyzing soccer games to measuring organoids, and from COVID-19 tracking to zero-shot topic classification. Inspired by your creativity, we added file uploaders, color pickers, date ranges, and other features. But as the complexity of serving the community grew, we realized that we needed a more scalable way to grow Streamlit’s functionality. So we’re turning to Streamlit’s best source of ideas: you!
Today, we are excited to announce Streamlit Components, the culmination of a multi-month project to enable the Streamlit community to create and share bits of functionality. Starting in Streamlit version 0.63, you can tap into the component ecosystems of React, Vue, and other frameworks. Create new widgets with custom styles and behaviors or add new visualizations and charting types. The possibilities are endless!
The Streamlit Components Gallery
The first thing you should do is check out the Streamlit Components Gallery to see what others have created and shared.
Each component can be installed with just a single line of code:
If you don’t find a component that works for you, you can make your own!
Building Your Own Components
Streamlit has a unique, functional style which lets you create rich, interactive experiences in very few lines of code. For example, let’s check out this simple Streamlit app:
Looking at this code, you can see that Streamlit calls come in two flavors: static components like
st.markdown are stateless and only send data to the browser, whereas bidirectional components like
st.slider have internal state and send data back from the browser.
Our challenge was to provide an API that embraces Streamlit’s functional style while capturing these use-cases as simply as possible. A few months ago, two amazing Streamlit engineers, Tim Conkling and Henrikh Kantuni, tackled this challenge and came up with a super elegant solution. The result is the new
streamlit.components.v1 package which comprises three functions. For static components, we added:
iframe(...), which lets you embed external websites
For bidirectional components, we added:
declare_component(...), which lets you build interactive widgets which bidirectionally communicate between Streamlit and the browser.
Let’s dive into how it works!
Let’s start with a simple static component to embed snippets of code called Github gists in your app. Ideally, adding the component should just be a single function call:
which would render a gist like this:
To create such a component, we start by importing the Streamlit Components library:
This somewhat wordy import statement serves two purposes:
- It versions the components API so that future changes don’t break existing components.
- It reminds us that we’re starting to use deep magic which we should hide from the user.
Now let’s use the
html(...) method to serve up the gist:
Getting Widget With It!
What if you want to create a stateful bidirectional component that passes information back to Python from the browser, or in other words, a widget? You can do this too! For example, let’s create a counter component:
which creates this:
Note that this code follows Streamlit’s unique functional style and captures the counter state embedded in the component. How did we achieve this? Happily, a single function call,
declare_component, does all the work to enable bidirectional communication with Streamlit.
Nice! Under the hood,
BUILD_PATH points to a component built using React, Vue, or any frontend technology you like. For this example we decided to use React and Typescript giving us this render function:
A neat benefit of this architecture is that you’re not limited to React. You can use any language or framework which compiles for the web. Here is the same counter component written in ClojureScript.
What we’ve shown you so far just scratches the surface. For more details, please check our documentation.
Sharing with The World
Did you create something broadly useful for the Streamlit community? Sure, you could keep that superpower for yourself, but it would be even cooler to share it! Get community feedback and praise. You can easily wrap your component in a PyPi package and submit it to our Gallery by following these instructions.
Try It Out And Let Us Know What You Think!
We’re excited to unlock for the community a new way to plug-and-play functionality into Streamlit. Streamlit Components let you write simple HTML extensions or tap into the whole ecosystem provided by React, Vue, and other frameworks. Your feedback drives innovation in Streamlit. Please tell us what you think and what you’d like next. Show off your shiny new components and share them with the world. We can’t wait to see what you build!