Streamlit Components - Community Tracker

[xareelee]

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.

[Asaurus1]

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)

[andfanilo]

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 Thank you!

[SiddhantSadangi]

@andfanilo - looks like we’ve hit the size limit with the wiki

I wanted to add my Supabase connection component

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

[andfanilo]

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

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

Have a nice day,
Fanilo

[ViniciusStanula]

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.

[Caroline]

Forgot to update here – I did increase the wiki size limit, so we should be able to add even more components to this list

[bouzidanas]

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.

[Pratham_Jha1]

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.

[Marcus_Schiesser]

@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)

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)

[Oleksandr_Arsentiev]

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/

[parsa_asgari]

Hi.

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

streamlit-bookmark

Also, the steamlit app is here:

streamlit app example

Hope it helps the people who need it.

[Charly_Wargnier]

Great component @Oleksandr_Arsentiev!

I added it on top of our tracker:

Best,
Charly

[Charly_Wargnier]

Thanks, @Marcus_Schiesser!

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

Best,
Charly

[Marcus_Schiesser]

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

[Charly_Wargnier]

Gotcha – this is great @Marcus_Schiesser!

I added it at the top of our tracker!

Best,
Charly

[Marcus_Schiesser]

Thanks

[andell]

Hi all

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/

[Charly_Wargnier]

@andell

Check github for explaination : https://github.com/drogbadvc/st-wordcloud

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

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

Best wishes,
Charly

[Charly_Wargnier]

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

💬 Show the Community!

Best wishes,
Charly