Streamlit Components - Community Tracker

[andfanilo]

Since the release of Streamlit Components, we’ve been thrilled to read the many new widgets and integrations to external librairies you have suggested and published ! There’s so many ideas around, we wanted to reference them all in one place, and make it easy for you to contribute to the growing Streamlit Components ecosystem !

Say hello to the first Streamlit community-driven wiki post, which you can freely edit to help track down components ideas or currently in development.

How can I contribute ?

Contributing to this wiki is easy and open to anyone (at least if you hung on the forum enough to get to Trust Level 1). It’s a click away from the Edit button on the bottom left of the post !

• If you have an idea for a Streamlit Component, you can create a new post for it in the forum and then reference it in this wiki
• Want to try implementing a component, but you need some inspiration ? Browse through the ideas, settle on one then move it into the In Development section.
  • It’s also a good way to find projects currently in development you can contribute to !
• When the component is ready for general use (even if there’s still features to add and bugs to track down), drop it in the Published section so other users find out about it and test it !
  • Hopefully we’re able to have them appear in the featured gallery too .
• Are you using a different combination of technologies to develop your components and want to share it with the community ? Share your template under the Component Templates section or check other’s workflows.
• If you’re hesitant in editing the wiki, you can put a comment and we’ll add it into the page

Feel free to add your own ideas for structuring it !

---

Published

• Streamlit Image Annotation – Component for image annotation (Post, GitHub, PyPI, Example App)

• Streamlit Star Rating – Component to let a user give a star rating (Post, GitHub, PyPI, Example App)

• Streamlit Tree Selector – multi-select component with nested options (Post, GitHub, PyPI, Example App)

• streamlit-image-coordinates – return the coordinates of clicks on an image (Post, GitHub, PyPI, Example App)

• st-pages – set up multipage apps without fiddling with filenames (Post, GitHub, PyPI, Example App)

• Streamlit Custom Toggle (Post, GitHub)

• Streamlit Toggle Switch (Post, GitHub)

• Streamlit Extras (Post, GitHub, PyPI)

• Highcharts (GitHub, Demo app)

• Streamlit Timeline (GitHub, Demo app)

• NLU (GitHub)

• HiPlot (GitHub)

• Echarts (Post, GitHub)

• spaCy (GitHub)

• pandas-profiling (Post, GitHub)

• Embed code (Post, GitHub)

• Ace editor (Post, GitHub)

• Drawable canvas (GitHub)

• Bokeh Events (Post, GitHub)

• Plotly Events (Post, GitHub)

• Streamlit-ipyvizzu (st-vizzu) Github, Demo, PyPI)

• Folium (Post, GitHub)

• 3D Molecule visualization (Post, GitHub, PyPI)

• Speck Molecule Visualization (Post, GitHub, PyPI)

• Annotated text (Post, GitHub)

• D3 Demo (Post, GitHub)

• Face-recognition timeline (Post, GitHub)

• Leaflet reactless template to return coords on map click (Post, GitHub)

• Image cropping (Post, GitHub)

• Observable Notebooks (Post, GitHub)

• Metrics Widget (Post, GitHub)

• Agraph (Post, GitHub)

• cytoscape-js (GitHub, PyPi)

• Lottie (Post, GitHub)

• Streamlit Player (Post, GitHub)

• Disqus integration (Post, GitHub)

• Discourse integration (Post, GitHub)

• Real-time video and audio with WebRTC (Post, GitHub)

• Timeline (Post, GitHub)

• STqdm – tqdm-like progress bar for streamlit (Post, GitHub, PyPi)

• Streamlit-tags – a new way to do add tags and enter keywords (Post, GitHub,PyPi)

• Google Charts (GitHub)

• Autorefresh (Post, GitHub)

• Extra Streamlit Components – Includes browser cookies management (GitHub, PyPi)

• Server-wide state objects shared across sessions (Post, GitHub)

• Plost – a deceptively simple plotting component. (Post, GitHub, Demo+Docs)

• Hydralit Components – Responsive navbar and more to come (Post, GitHub, PyPi, Demo)

• Pyvis – stvis component for rendering pyvis interactive graphs (Post, GitHub)

• st_btn_select – button based selection and minimalist navbar (Post, GitHub)

• Streamlit-Authenticator – a secure authentication module to validate user credentials in a Streamlit application. (Post, GitHub, PyPi)

• Streamlit Text Rating (Post, GitHub, PyPi)

• Streamlit Chat – UI for Chatbot (Post, GitHub, PyPi)

• Streamlit Option Menu (Post, GitHub, PyPi)

• Streamlit Img Label (Post, GitHub, PyPi)

• Click detection for HTML content (Post, GitHub, PyPi)

• Clickable images (Post, GitHub, PyPi)

• ag-grid – Table on steroids (Post, GitHub, share)

• Streamlit Javascript (Post, GitHub, PyPi)

• Streamlit SHAP – provides a wrapper to display SHAP plots in Streamlit (Post, GitHub, PyPi)

• Barfi – Flow Based Programming component for Streamlit (Post, GitHub, Docs, PyPi)

• Streamlit components for FirstLanguage NLP API (Post, GitHub , Demo, PyPi, WebSite)

• streamlit-d3graph – a simple component to display d3graph network graphs in Streamlit apps (Post, GitHub, PyPi)

• Sidebar tabs for on-hover-custom-navigation bar (Post, GitHub, PyPi)

• Streamlit Elements – Build draggable and resizable dashboards with Material UI, Nivo charts, Monaco (VSCode), and more (Post, GitHub, PyPi)

• Streamlit Audio Recorder – enables recording audio from the client’s mic in apps that are deployed to the web. (via browser Media-API, REACT-based) (GitHub)

• Streamlit custom notification component with the function to close it (Post, GitHub, PyPi)

• Prettier notification box, sibling of this: (Post, GitHub, PyPi).

• streamlit-dynamic-tabs (Post, GitHub, PyPi)

• Streamlit Image Comparison (GitHub, Demo)

• Streamlit pagination – add pages to the bottom of your app to navigate data (Post, GitHub, PyPi)

• Streamlit User Authentication – streamlit-login-auth-ui – Connect your streamlit application to a pre-built and secure Login/ Sign-Up page (Post, GitHub, PyPi)

• Login authentication (Oauth) and localStorage access in Streamlit, synchronous communication – streamlit-ws-localstorage – Simple way of providing Oauth logins like Linkedin, Google etc without having to specify redirect urls: (Post, GitHub, PyPi)

• Text input that returns as you type (Post, GitHub, Demo, PyPi)

• streamlit-image-select – An image select component for Streamlit (Post, GitHub, Demo, PyPi)

• streamlit-js-eval - Evaluate arbitrary JavaScript expressions and capture the result in Streamlit. (Post, PyPI, GitHub, Demo)

• streamlit-camera-input-live (Post, GitHub, PyPi, Demo)

• streamlit-ext - sync widget’s value with url & download button which won’t cause rerun and some useful functions (Post, GitHub, PyPi)

• stpyvista - Show 3D visualizations from PyVista in Streamlit (Post, GitHub, PyPI, Demos).

• streamlit-vertical-slider (Post, GitHub, PyPi)

• streamlit-datalist - Like Streamlit’s selectboxes but accepts custom inputs! (Post, GitHub, PyPi)

• streamlit-keycloak: User authentication and single sign-on in your app using Keycloak (Post, GitHub, PyPi)

• streamlit-back-camera-input: Camera input with back camera as default (Post, GitHub, PyPi)

• streamlit-qrcode-scanner: QRCode & Barcode scanner base html5qrcode (Post, GitHub, PyPi)

• streamlit-tesseract-scanner: OCR scanner use tesseract (Post, GitHub, PyPi)

• ML user feedback collection with streamlit (Post, GitHub, PyPi)

Component Templates

• Svelte (Post, GitHub)
• Vue.js (Post, GitHub)
• Streamlit Next.js Component, Auth0 Authentication (latest tutorial), (deprecated: Post, deprecated: doc, deprecated: GitHub)
• Simple Authentication for Streamlit Apps (Post, GitHub)
• Hydralit for Multi-Page Streamlit Apps (Post, GitHub, PyPi, demo)
• React with hooks and function-based components (Post, GitHub)
• Create components with pure JS (no framework) (Post)
• Cookecutter components for simple JS components (Post, GitHub)

Tutorials

• Official Youtube tutorial part 1 - part 2
• Youtube tutorial by James Briggs part 1 setup - part 2 MUI Card - part 3 publishing
• Youtube tutorial by @andfanilo link
• Scatterplot selection with Plotly.js link
• Full community tutorial by @andfanilo link
• Introduction to components for Auth0 by @asehmi part 1
• Integrating Elm components in Streamlit by @kantuni link
• Deep dive in creating Streamlit-WebRTC by @whitphx link
• Creating a simple bidrectional component by @blackary link

In development

• Quill editor (Post, GitHub)
• Cytoscape.js (Post) - looking for users
• Label Studio frontend for data annotation (Post, GitHub)
• JSME (Post)
• TensorBoard (GitHub)
• Notifications (Post, GitHub)
• Streamlit-sync: sync widgets between sessions and persist on disk (Post, GitHub, share)
• link_button - A simple way to link a button to a URL. (Post, GitHub, Demo)
• st_radial - A custom component to show metrics. (Post, GitHub, Demo)
• st-card - A component for displaying KPI metrics in your apps(Post, GitHub, Demo)
• streamlit_apex_charts - A wrapper over ApexCharts.js(Post,GitHub,Demo)
• Charticulator (Post, GitHub) - Component to render charticulator templates with streamlit
• Streamlit-Survey (Post, Github) - Survey components for Streamlit Apps

Ideas in discussion

• Material UI React Table (Post)
• WYSIWYG HTML editor (Post)
• Selection in canvas (Post)
• 3D mesh visualizer with VTK (Post)
• Ipywidgets (Post)
• Network visualization : Networkx / Pyvis (post Pyvis)
• TensorflowJS (Post)
• Tableau Software / Power BI embed (issue)
• Vega (GitHub)
• ThreeJS (Post)
• Display PDF (issue)
• Streamint text_input (Post)
• Chart.js (issue)
• HighCharts (issue)
• jsroot (issue)
• RadioSets (Post)

[Chad_Mitchell]

This is great @andfanilo! Is there a place for people to submit and vote on components they’d like to have in addition to the above list with component in development? Might help surface the 80/20 of the most useful set of next components for the community.

I’m having a difficult time picking which component project to work on first. Streamlit’s amazingness is also causing me major decision paralysis

[andfanilo]

Hey @Chad_Mitchell ! @randyzwitch and I were also playing with the idea of creating periodic polls to gauge the interest of the community for a Streamlit component idea, though we’re not sure if we’d create those polls under this wiki or create a new post for each poll . I guess even you could create a poll with a small number of components you’re willing to tackle and let the community decide
I think we have enough ideas to create such poll, so we’ll experiment with this soon !

[rsheftel]

There are two components I would like created but I do not have the time or technical competency to do it. I would like to pay someone to do it with the work completely open source. Before I post about it I want to make sure with the moderators they are OK with the idea.

[randyzwitch]

Hi @rsheftel, it’s perfectly fine to do so. We don’t have a jobs section or anything, since it doesn’t come up frequently enough yet, but feel free to make a post on our Random section

Best,
Randy

[Probability]

Streamlit Navbar component to support multi-page apps with or without using Hydralit.
Hydralit Components
Features include

• Full theme color support
• Full container support (can put on sidebar too)
• Responsive layout
• Use Bootstrap icons or emojis or nothing
• Configure Response values when clicked
• Assign tooltips

[Mahmoud_MOUBADIR]

Great !!

[fhak]

The Autorefresh component would be a great addition to the official streamlit components as it makes things a lot cleaner when building an App which needs to Update Data continuously!

[Selva_M]

Sharing our custom component for accessing FirstLanguage NLP API. It would be great to get feedback on this and it would be awesome to get featured in the Components section under NLP.

streamlit-firstlanguage
GitHub
Demo
PyPi

[bvu]

Sharing my first components to help creating bi-directional component directly with HTML and JS faster. The idea is to expose a function in Javascript to send data to Streamlit.

Here is a demo of creating inline buttons:

Installation: pip install streamlit-bridge
Repository: https://github.com/binh-vu/streamlit-bridge.

[andfanilo]

Hey y’all!

I just created a Tutorials section, so if you come across a Components tutorials, don’t hesitate to add it to this wiki!

I’m also wondering, now that we have 50+ components, how we can maybe categorize them a bit more. Don’t hesitate to give category ideas (like image, video, audio, charting, etc…)

Have a nice Streamlitin’ day Streamliters
Fanilo

[m-wrzr]

Sharing my searchbox component, that fetches suggestions based on a provided function and updates with user input. Any feedback would be appreciated!

Repository: m-wrzr/streamlit-searchbox

[gagangoku]

Sharing my first components to allow synchronous localStorage access to Streamlit apps. The code runs synchronously so the flow is super simple and the app doesn’t run multiple times. Access to localStorage means that you don’t have to keep authenticating users on every refresh.

Hopefully this can be integrated into main Streamlit which would make it much faster.

Here is a demo of fetching saved info in the browser:

Installation: pip install streamlit-ws-localstorage
Repository: GitHub - gagangoku/streamlit-ws-localstorage: A simple synchronous way of accessing localStorage from your Streamlit app.
On pypi: streamlit-ws-localstorage · PyPI

[Gauri_Prabhakar]

User Authentication Page for Streamlit:

I have created a new library which enables the developers to connect their application to a secure login/ sign-up page.

You can customize specific parts of the page without any hassle!

The library grants users an option to reset their password, users can click on Forgot Password? after which an Email is triggered containing a temporary, randomly generated password.

The library also sets encrypted cookies to remember and automatically authenticate the users without password.
The users can logout using the Logout button.

The best part is, it is purely plug and play. No DB support needed.

Checkout this video which highlights all the features of the library: streamlit_login_auth_ui_features_video.mp4 - Google Drive

Link to the Github Repository: GitHub - GauriSP10/streamlit_login_auth_ui: It lets you connect your streamlit application to a pre-built and secure Login/ Sign-Up page.

Try the Login/ Sign-Up feature on a sample application deployed on Heroku: https://streamlit-login-auth-ui.herokuapp.com/

PyPi: streamlit-login-auth-ui · PyPI

The Demo:

streamlit_login_auth_ui_demo.mp4

Installation

pip install streamlit-login-auth-ui

[Sai_SaiGraph]

A master detail component/grid would be great if any available please post.
Thanks
Sai

[ddzlob]

Original post here, short version below:

Hey there, I created a library streamlit-jupyter to allow for seamless creation of streamlit apps in jupyter notebooks.

Install

pip install streamlit_jupyter

How to use it

Take a look at our example notebook

The main idea is for you experiment and develop in your notebook,
visually see all the pieces, and then convert the notebook to .py to
be run by streamlit

start by importing streamlit and patching it with streamlit-jupyter:

import streamlit as st

from streamlit_jupyter import StreamlitPatcher, tqdm

StreamlitPatcher().jupyter()  # register streamlit with jupyter-compatible wrappers

And now develop your notebook as usual, but with the ability to use
Streamlit widgets and components.

[andell]

Hi all

Sharing my streamlit component to display apexcharts !

It’s quite easy to use.
Check github for explaination : GitHub - drogbadvc/streamlit-apexcharts: A Streamlit simple component to display ApexChart.
Installation : streamlit-apexjs · PyPI

I just got a fix bug
Enjoy ! and thanks @andfanilo

[Hanan_Shteingart]

Can someone please develop a table dataframe which emits the selected row? this is super useful (e.g. plotting the progress of the selected experiment, etc.)? today I have to create an additional selection box to select which row from the table which is cumbersome.