Customizable Layout for Streamlit

Official Announcements
1

Hey Community :wave:,

One of our major upcoming goals is to add style and customization options to Streamlit, and to build out new layout primitives such as horizontal and grid. This is a tricky one to get right because layouts make up some of the most complex parts of display logic like CSS, not to mention it’s really easy to make these layouts look ugly.

We’d love to hear:

  • What are your overall thoughts on layout?
  • What are some of your favorite layout systems in other languages?
  • What are your use cases for layout?

We will compile all of these ideas and later release a design doc for commenting.

If you’re looking to do some customizations right now, here are some great style and layout resources from the community. And if you’re already using html, unsafe_allow_html=True, rest assured we have no plans to deprecate it!

16 Likes
2

If we want to follow Streamlit’s ethos of " the ability to create beautiful apps as easily as writing Python scripts",something like R’s patchwork would be totally on point!

6 Likes
3

thanks for opening this thread, @thiago. It’s great to see that customizable layout is a major goal for Streamlit.

Overall thoughts and use case:

In addition to designing more powerful and compact apps, this feature would help replace existing non-streamlit dashboards

Favorite layout:

Being able to replicate the flexible way in which widgets and plots can be positioned in BI tools would be great.

hope that helps!

4

Overall the focus on layout separate from style/theme is important. Style/theme IMO should be largely SASS variable driven. Style is where the “ugly” comes in while layout can be standardized, consistently spaced, and most importantly useful i.e. responsive. Just as I can write st.title to get a consistent headline I should be able to write something like st.layout.columns to start a set of columns with use cases like two charts next to each other or four charts in a grid for a panel/dashboard layout.

I’ve been using Bulma.io recently with Rails and Python (Flask) apps and it has proven to be a reliable layout partner. It is more than something like Skeleton but less than Bootstrap and hits the sweet spot for me. I’ve used it mostly to build a custom annotation app for our ML project with charts and spreadsheet like tables for display and input. We’ve also used it for a customer facing account management app and it is flexible enough to match our brand.

It has all the primitives and sensible CSS class names;
button
tag
columns
title
input
box
etc.

So I can envisage a straight forward mapping of Bulma to Streamlit e.g.

st.title('Streamlit With Bulma Layout')

st.layout.columns:
  st.layout.column:
    st.line_chart(chart_data)
    st.button
  st.layout.column(width = 'one-third'):
    st.write('Some explainer copy inbetween charts.')
  st.layout.column:
    st.line_chart(chart_data_2)

Bulma comes in SASS or straight CSS.

7 Likes
5

I don’t have an opinion about the mechanism for setting style/theme, but I think it’s important that there be some way to do it.

I tried changing a streamlit app to a dark color scheme by injecting CSS, but I wasn’t able to do it because of the dynamic classnames streamlit currently uses.

4 Likes
6

Whatever you guys decide for customisation options I think it’s important to also keep the current ease of usability. The charm of Streamlit is that you don’t have to deal with html/css/js to create a nicely-looking app/page.

11 Likes
7

We have built Streamlit apps as a data collection apps (think data entry/forms etc) and these apps would greatly benefit from row/grid layout so we can add multiple buttons for different functions. We have Save/Load/Submit buttons for example and right now they have to go on new lines each. We also have large entries of text added so something like st.textarea would be good.

3 Likes
8

I love the idea of having some sort of grid system.

I think a grid system will allow us to have more options in not only creating apps from top to bottom (vertically), but also have horizontal options to put two or more items next to each others.

3 Likes
9

I really like the way that Shiny in R lets you lay things out. I found it relatively simple and it looks great.
Also, I’d love a way to add multiple tabs/pages to an app.

3 Likes
10

Looking forward to this. Any updates or ETA would be appreciated. Best

1 Like
11

Some layout features are coming really soon :wink: (and they are merged in streamlit-nightly if you are adventurous)

Best,
Fanilo

6 Likes
12

@andfanilo that’s really awesome!!!
I’m eager to have this feature.

13

:muscle:

14

I also can’t wait to play around with this new feature! :upside_down_face:

1 Like
15

I’m loving the grid type layout, it’s a massive improvement to get some more control over the layout!

I’m still itching for a way to align widgets inside their respective columns and rows though :slight_smile:
Currently an image and text underneath each other will always look out of place cause of alignment.
Would be amazing to have properties like st.image(align=“center”) and st.markdown(align=“right”) for instance even though pure markdown doesn’t really have a notion of position. But maybe there’s a way to translate it to a < p align=“center” > element underneath?

Any plans for an alignment system like that? :smiley:

2 Likes