Learn Streamlit by building the Beginner Template Tour
Hey, community! 👋
My name is Shruti Agarwal, and I’m a Streamlit Creator.
I love to use Streamlit when it comes to building and deploying beautiful apps in minutes.
I can vividly recall when I first tried to build a Streamlit app by using the online IDE (Integrated Development Environment) Replit. The Repl couldn’t load the app in a browser. It turned out that many Replit users have faced the same issue. So I built the Streamlit Beginner Template Tour (a guide for Streamlit basics) and created a Replit template. It successfully loaded in a browser! 🎉
In this post, I’ll show you how to do this step-by-step:
- Step 1. Create a new Repl
- Step 2. Install Streamlit
- Step 3. Write libraries
- Step 4. Write “Hello World!” 👋
- Step 5. Run your Streamlit app
- Step 6. Add more code! ✨
If you can’t wait to try it, here's the app and here’s the repo.
Build a Streamlit app on Replit
Step 1: Create a new Repl
If you don’t already have a Replit account, sign up for it and click on “+” to create a Repl. Select “Python template” and name it “streamlit_test”:
Step 2: Install Streamlit
Head to the “Shell” section of your Repl and type the following commands:
$ pip install streamlit
$ streamlit --version
Step 3: Write libraries
Add a new file as requirements.txt for writing libraries. Write these libraries to use inside your main code:
streamlit==1.12.2
pandas==1.4.4
numpy==1.23.2
It will look something like this:
Step 4: Write “Hello World!” 👋
Write the below code in main.py file:
import streamlit as st
st.title('Hello World!')
st.write('This is a simple text')
This imports the Streamlit library and adds a title along with the simple text. Your Repl will automatically save your work! Now, it’s time to run your app. 🤞
Step 5: Run your Streamlit app
Go back to “Shell”and type $streamlit run main.py. If it asks you to register your email, press the Enter key, and your app will open in a new browser:
Step 6: Add more code! ✨
Go ahead and add more code:
import pandas as pd
import numpy as np
# Expander section
with st.expander("About"):
st.write("""Trying to add a data table, chart, sidebar button with
ballons, an image, text input & exploring tabs!""")
# Sidebar section
with st.sidebar:
st.subheader('This is a Sidebar')
st.write('Button with Balloons 🎈')
if st.button('Click me!✨'):
st.balloons()
else:
st.write(' ')
# Dataframe and Chart display section
st.subheader('Interactive Data Table')
df = pd.DataFrame(
np.random.randn(50, 3), # generates random numeric values!
columns=["a", "b", "c"])
st.dataframe(df)
st.subheader('Bar Chart 📊')
st.bar_chart(df)
# Image upload and text input section
st.subheader('An Image')
st.image('https://www.scoopbyte.com/wp-content/uploads/2019/12/tom-and-jerry.jpg')
st.subheader('Text Input')
greet = st.text_input('Write your name, please!')
st.write('👋 Hey!', greet)
# Tabs section
st.subheader('Tabs')
tab1, tab2 = st.tabs(["TAB 1", "TAB 2"])
with tab1:
st.write('WOW!')
st.image("https://i.gifer.com/DJR3.gif", width=400)
with tab2:
st.write('Do you like ice cream? 🍨')
agree = st.checkbox('Yes! I love it')
disagree = st.checkbox("Nah! 😅")
if agree:
st.write('Even I love it 🤤')
if disagree:
st.write('You are boring 😒')
Here’s the code breakdown:
pandas — for writing a dataframe
numpy — to generate random numbers
st.expander — to add an “About” section
st.sidebar — for passing Streamlit elements by using with notation
st.tabs — separated tabs to pass Streamlit elements by using with notation
st.button and st.balloons — a button for throwing balloons 🎈
st.text_input — a single-line text input
st.checkbox — to select multiple options
st.dataframe — displays pandas dataframe as a data table
st.bar_chart— displays a beautiful bar chart
st.image — displays an image
Once you make these changes, the app will show a message in the top right corner. Click on “Always rerun” to see the changes:
Congratulations! 🥳
Now you know how to build an interactive and beautiful Streamlit app. It’ll look something like this:
Explore more with my Replit template in just two steps:
1. Click on “Use Template” to fork it and add your own flair!
2. In your forked Repl, go to “Shell” and type:
$ pip install -r requirements.txt
$ streamlit run streamlit_app.py
You’ll be able to view your app in a browser.
Wrapping up
Thank you for reading my post! I had so much fun building the Streamlit app and the Replit template. I hope you'll use it to create your own apps. If you want to share what you built or have any questions, please post them in the comments below or connect with me on Twitter, LinkedIn, or GitHub.
Happy Streamlit-ing! 🎈
This is a companion discussion topic for the original entry at https://blog.streamlit.io/how-to-build-streamlit-apps-on-replit/
I have made changes within the 
You can copy the config file changes from my template and use it for your Streamlit apps. Make sure that you replace the app name with yours (wherever needed) in the config file.