Going further

Well done! You now have your very first interactive Streamlit component.

But remember…you don’t want to get stuck into tutorial land, it’s time to use your newly acquired skills to build some more components! Here are some ideas to get you started.

  • Rendering a custom interactive datatable (e.g.,react-pivottable, ag-Grid, SlickGrid) that enables you to select or order rows/columns and send the data back into Python.
    • We did not go into details about passing a Pandas Dataframe. It is serialized as an Arrow Table and is a bit harder to manipulate on the Javascript side. Check the SelectableDataFrame and CustomDataframe in examples of the components template for manipulating those.
  • Since you own the logic and state of your component, you can implement custom web features in your Streamlit app:
    • Text input with autosuggest;
    • Microphone or webcam feed into Streamlit;
    • Multiple file uploader to S3;
    • Free drawing on a Canvas element, image cropping or annotation;
    • Map visualization with Folium or Leaflet;
    • Make a custom form with LocalStorage;
    • Embed a Tableau Software / PowerBI instance using their React libraries…

While we use the React template in this tutorial—which manages a lot of boilerplate for connecting with Streamlit—remember that the frontend code is accessed from a web server and rendered inside an iFrame.
As long as you subscribe to the correct Javascript events, you can use any web tech you want to build your custom component, from Web Components with Polymer to Vue.js/Svelte/Angular or even native Javascript!
Check out the StreamlitReact.tsx file and the React-less template for a better understanding of the events to subscribe to.

If you’d like help from the community to build your component, be sure to share it under the Show the Community! category with a (WIP) in the title along with a Component tag. For example: Component: Upload Multiple Files (WIP)