5 ways to customise your Streamlit UI

Why use the defaults when you can customise?

Example of a Streamlit app (Image by Author)

Do you want to make a web app, but don’t want to learn any of the web app frameworks? Do you want to deploy an app, but find Heroku too complicated? Then Streamlit is for you!

Even mere data scientists like myself, who can’t tell the difference between a HTML and a JavaScript, can whip up an app in no time at all using Streamlit.

Of course with ease comes drawbacks, for instance it is not obvious how to customise certain aspects of the user interface. So if you’re new to Streamlit, you might not be aware of the following simple ways to customise your UI…

Streamlit menu (Image by author)

1. Hide the menu button

By default, there is a hamburger button in the top right of your app, which when clicked will open up the Streamlit menu.

While this menu does contain all sorts of top-notch stuff, you might want to hide it when you deploy your app to users.

Luckily you can do just this by adding the following snippet (thanks to Mani for this):

Menu, be gone!

2. Condense the layout

These days we spend too much of our lives scrolling. So it is the responsibility of all app developers to try and fit as much as possible on one screen, thus reducing the amount of scrolling their users need to do.

One small step you can take is to remove the padding between components of your app using the following snippet (thanks to Marc for this):

If there isn’t a band out there called “Zero Padding”, then there should be

3. Custom color palette

The blue aesthetic (Image by author)

It turns out if you dig a little deeper into Streamlit, you soon find out how easy it is to do all sorts of things

For instance, I’m a fan of the blue aesthetic, and was keen to go in this direction for my app.

All I had to do was create a .streamlit folder in my repository and add this config.toml file (which sets just some of the many configuration options that are available):

It is amazing that an artistic beauty like the blue aesthetic could be represented as simple computer code

4. Set the page title and icon

Now that’s a tab (Image by Author)

Last year set_page_config was added (thanks to akrolsmir). This allows you to, among other things, adjust the title and icon that appears in the browser tab:

st.set_page_config(page_title=’TrekViz’, page_icon=”🖖”)

Streamlit now has full emoji support.

5. Multiple columns

Multiple columns is just one of the many layout options added by Streamlit in late 2020. Having three columns is now as easy as 1, 2, 3:

st1, st2, st3 = st.beta_columns(3)

I’m told you can even do a grid layout, but that’s beyond my understanding.

Conclusion

Streamlit, at first glance, seems to lack much customisability. But below the surface is a world of possibilities, only a few of which are listed in this article.

The team is constantly working on new features, and there are many great examples of Streamlit apps to draw inspiration from. So next time you need to whip up an app, why not consider Streamlit?

Here’s one I made to summarise Star Trek character interactions:

TrekViz