Streamlit Components - Community Tracker

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 !

:fireworks: 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 !
  • 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 !


:checkered_flag: Published

:memo: Component Templates

:teacher: Tutorials

:construction_worker: In development

:bulb: 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)
33 Likes
Streamlit-javascript, run client side javascript and get result
Barfi : Flow Based Programming for Data Science (New Component)
Record sound from the user's microphone with streamlit
Embedding a terminal
Streamlit Component Svelte Template
New Component: streamlit-terran-timeline makes it super easy to create face-recognition timelines!
New Component: streamlit-observable, a new way to embed Observable Notebooks
streamlit-on-Hover-tabs (for custom navigation bar)
New Component: Streamlit-tags a new way to do add tags and enter keywords
New Component: streamlit-labelstudio, allows you to embed the Label Studio annotation frontend into your application!
Merge component in to main Streamlit Lib
Any Future Plans for Easier CSS/JavaScript Use?
New component Visgraph
Testing Streamlit Apps Using SeleniumBase
3d globe component
✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!
Metrics / KPI Component
Custom component to display clickable images
Ag-Grid component with input support
New Component: streamlit-login-auth-ui, connect your streamlit application to a pre-built and secure Login/ Sign-Up page
New component: Login authentication (Oauth) and localStorage access in Streamlit, synchronous communication
St_echarts_events, a new method to get the echarts-chart return value from the front-end event
New Component: streamlit-img-label, an easy app for image annotation
Showing off the streamlit-agraph Component
🍅 Plost - A deceptively simple plotting component for Streamlit
Image cropping/ selection component
Reusable Timeline Component with demo for History of NLP
New Component: Streamlit-chat, a new way to create chatbots
New Component: Awesome Table
New component: HTML content with click detection
New Component: streamlit-sortables
New Component: Streamlit JS Eval
New Component: Streamlit-Wordcloud, a new component to build beautiful and interactive wordclouds with Streamlit
Streamlit-option-menu is a simple Streamlit component that allows users to select a single item from a list of options in a menu
Tracking fish health in aquaculture industry
Custom notification alert box
Are you using HTML in Markdown? Tell us why!
Streamlit Component Svelte Template
Molecule visualization with Streamlit
New Component: `st_btn_select` - Selectbox alternative with buttons
New informative / notification component
Integrating What-If-Tool Widget in Streamlit App
New Component: st-card for displaying KPI metrics in your apps
New Component: streamlit-keyup, a textbox that returns the text as you type
Simple Authentication for Streamlit Apps
New Component: Streamlit Text Rating
Bi-directional Plotly Component
Streamlit Autorefresh
Streamlit server & future prospects
Extra Streamlit Components
Integrating cropper JS
Support for CytoscapeJS
New Component: Streamlit Google Charts
New Component: st_radial, A custom component to show metrics
New Component: Searchbox
Cookies support in Streamlit!
New Component: link_button, A simple way to link a button to a URL
Another tabs component, only this time... its DYNAMIC!
STqdm : a tqdm-like progress bar for streamlit
SciLit - Scientific Literatures and Analytics Search App
Interested in creating and/or testing components?
JSME React Component
New Component: streamlit-webrtc, a new way to deal with real-time media streams
JSME React Component
New pyvis component for graphs
St.radio() split into parts, accepting dictionary as input
Fire-state: Preserve states when switching pages in multipage app
A new library and template using React Hooks for creating Streamlit Components
New Component: Streamlit-Authenticator, a secure authenticaton module to validate user credentials in a Streamlit application
New Component: streamlit-tree-select, a simple and elegant checkbox tree
Testing Streamlit Apps Using SeleniumBase
New library: streamlit-sync, another way to sync states across sessions

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 :slight_smile:

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 :slight_smile: . I guess even you could create a poll with a small number of components you’re willing to tackle and let the community decide :stuck_out_tongue:
I think we have enough ideas to create such poll, so we’ll experiment with this soon !

3 Likes

A post was split to a new topic: Firebase and Streamlit

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.

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 :+1:

Best,
Randy

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

6 Likes

Great !!

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!

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

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:

inline_buttons

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

2 Likes

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 :balloon:
Fanilo

1 Like

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

example

Repository: m-wrzr/streamlit-searchbox

1 Like

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

3 Likes

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:

Installation

pip install streamlit-login-auth-ui
1 Like