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 Developmentsection.- 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
Publishedsection so other users find out about it and test it !- Hopefully we’re able to have them appear in the featured gallery too
.
- 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 Templatessection 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
- Highcharts (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)
- 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
d3graphnetwork 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)
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
- 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)
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)
