Streamlit Components - Community Tracker

The color is real hard to read in dark mode, and I did not find a way to turn off the dark mode on this page. Please consider changing the theme.

4 Likes

streamlit_qs is an add-on library that extends the functionality existing streamlit input elements to easily read and write data to-and-from the URL query string. This makes it easy to do two things:

  1. Generate a ā€œpermalinkā€ for users that captures the ā€œstateā€ of your application and can return them to that same state at a later time, or shared with others.
  2. Feed data directly to your streamlit app from other applications by encoding it in a JSON string or a compressed base64 string.

Itā€™s kind of pointless to show the new components in images because they look identical to existing
ones so textboxes it is, but thereā€™s also a demo page:

Reading data from the URL

import streamlit_qs as stqs

stqs.text_input_qs("Enter Some Text", key="input_some_text")

# Nagivating to https://your.streamlit.app/?input_some_text=Hello+World
# will populate the text box with "Hello World"

Writing data to the URL

import streamlit_qs as stqs

stqs.text_input_qs("Enter Some Text", key="input_some_text", autoupdate=True)

# Now when you type "Ok, I input some text" into the text_input box, 
# the page URL updates to 
# https://your.streamlit.app/?input_some_text=Ok%2C+I+input+some+text

Itā€™s not just text input
streamlit_qs supports most of the standard input elements, and comes with functions
to easily extend your own custom elements with query-string interaction.

  • selectbox_qs
  • multiselect_qs
  • radio_qs
  • text_area_qs
  • text_input_qs
  • number_input_qs
  • checkbox_qs
  • (slider_qs coming soon)
2 Likes

Hey all, please make sure you actually edit the first wiki post with your project, as it is scraped by some project to showcase the new components :slight_smile: Thank you!

1 Like

@andfanilo - looks like weā€™ve hit the size limit with the wiki :frowning:

I wanted to add my Supabase connection component

  • :electric_plug:Streamlit Supabase Connector - A Streamlit connection component to connect Streamlit to Supabase Storage and Database (Post, GitHub, Example App)
1 Like

Thereā€™s a size limit ?? Now thatā€™s new!
Hmmm Iā€™ll be out of the Internet for 2 weeks here so maybe @Caroline or @Charly_Wargnier can look into it? Thanks :smiley:

Plus, itā€™d be great to add a community connector section for sure, especially after the hackaton.

Have a nice day,
Fanilo

2 Likes

Hey, @andell, that is awesome.

I donā€™t know if there is a post dedicated solely to this component. I searched for it but havenā€™t found anything.

Iā€™m just asking if thereā€™s any way to make the chart responsive to the container size? Something like use_container_width=True. Depending on the window size, the chart either excludes some parts of it or displays a lot of blank space around it.

1 Like

Forgot to update here ā€“ I did increase the wiki size limit, so we should be able to add even more components to this list :star_struck:

2 Likes

Hi everyone,

I have 2 custom components to share and a package of mini-components and functions

  • streamlit-code-editor : Post惻PYPI惻Github惻Docs惻Demo
    Essentially a code editor component based on Ace Editor that is customized and extended with Streamlit in mind. Two custom themes (light, dark) were created to change the appearance of the editor to be closer to Streamlitā€™s own code block (font, line spacing, tokenization and coloring, etc) as well as to incorporate elements of streamlit appā€™s theme. On top of this, this code editor allows you to add optional elements like buttons, an info/status bar, and a menu bar.

    Markdown Composer is a Streamlit app that uses streamlit-code-editor. Post

  • streamlit-reveal-slides : Post惻PYPI惻Github惻Demo
    A component that generates reveal.js HTML presentations from markdown or markup. The generated presentation is then embedded into your Streamlit app for full-featured use. You can run the presentation right from inside your app in embedded mode or fullscreen mode. This component is bidirectional allowing your Streamlit app to control/change the presentation but also allowing your app to respond to changes in the presentation.

    Chat GeoParT is a Streamlit app that uses streamlit-reveal-slides. Post

  • streamlit-float : Post惻PYPI惻Github惻Demo
    A simple python package that provides functions that allow you to target containers (like st.columns and st.container) with CSS with the main feature being the ability to fixed the position of containers with respect to the viewport (causing them to appear as if they are floating). The package provides multiple ways to achieve this with the simplest being as easy as calling the float function on a container (example: my_container.float()). Additionally, this package also provides access to mini-components like Float Box and Float Dialog.

Let me know if I am missing anything or if any of the links/apps are broken.

3 Likes

created a Tab Bar component in Streamlit to empower customization of styles. While st.tabs handles this functionality really well.Some use cases are there to have a Tab Bar with a little different styling apart from the theme where this component comes into the picture. It provides the functionality to change fontSize , fontWeight,textColor,HoverStateColor and background of the Tab bar.

Visual Representation can be found here - https://st-tabs.streamlit.app/

For more information : GitHub - PrathamJha1/st_tabs: Package to make customizable Tab Bar

pypi ā†’ st-tabs Ā· PyPI

Would love to get some feedbacks and suggestions out here.

1 Like

@andfanilo I canā€™t edit the pinned wiki post (I guess I donā€™t have Trust Level 1), so hereā€™s the information:

Monaco Editor - The editor from Visual Studio Code as Streamlit component (Post, GitHub, Example App, PyPI)

demo

Example:

from streamlit_monaco import st_monaco
import streamlit as st

st.title("Streamlit Markdown Editor")

content = st_monaco(value="# Hello world", height="600px", language="markdown")

if st.button("Show editor's content"):
    st.write(content)
3 Likes

Hi All, I recently built a streamlit-dynamic-filters component. The filters apply to a dataframe and adjust their values based on the user selection (similar to Google Sheets slicers or Only Relevant Values in Tableau).

Hereā€™s some additional details about the component:

PyPi package: streamlit-dynamic-filters Ā· PyPI

GitHub: GitHub - arsentievalex/streamlit-dynamic-filters: Custom component with dynamic multiselect filters for Streamlit

Demo App: https://dynamic-filters-demo.streamlit.app/

2 Likes

Hi.

I have developed a bookmarking functionality on top of the chat component.
Here is the PyPI package:

Also, the steamlit app is here:

Hope it helps the people who need it.

2 Likes

Great component @Oleksandr_Arsentiev!

I added it on top of our tracker:

Best,
Charly

1 Like

Thanks, @Marcus_Schiesser!

Out of curiosity, is it different from the Monaco editor available in @okldā€™s Streamlit Elements suite?

Best,
Charly

1 Like

Yes, it behaves like a regular streamlit component and doesnā€™t require the layout system that elements introduce

2 Likes

Gotcha ā€“ this is great @Marcus_Schiesser!

I added it at the top of our tracker! :hugs:

Best,
Charly

1 Like

Thanks

1 Like

Hi all :wink:

Sharing my simple streamlit component to display a WordCloud with D3JS !

Itā€™s quite easy to use.

Check github for explaination : https://github.com/drogbadvc/st-wordcloud
Installation : https://pypi.org/project/st-wordcloud/

1 Like

Thanks @andell for sharing your (super cool!) component! :raised_hands:

I will check it out and add it to the tracker.

Best wishes,
Charly

2 Likes

@andell Iā€™ve now added your WordCloud component at the top of our tracker (you can scroll to the top of this thread to see it).

I also suggest you share your component in our ā€œShow the Communityā€ section:

Best wishes,
Charly

2 Likes