Comment on page

Create a Mito for Streamlit App

A Quickstart guide to creating your first Streamlit app with the Mito Spreadsheet.

Make sure you've installed Mito for Streamlit before continuing.
The easiest way to create your first Streamlit application with Mito is to try things yourself. Streamlit has an awesome developer story, so for each edit you make to your code, you can just refresh the page and see your new changes.
In this guide, we're going to use Mito for Streamlit to create an interactive app that allows users to explore Tesla stock data. We'll do some basic data cleaning, and then perform an analysis that computes the traded volume in the most recent month. 
To see the finished script, scroll down.
Create your first app
1.First, create a new Python script. Let's call it stock_data.py
2.Open stock_data.py in your favorite IDE or text editor, then add these lines:
import streamlit as st
from mitosheet.streamlit.v1 import spreadsheet
3.Let's make the page wide, and set a title:
st.set_page_config(layout="wide")
st.title('Tesla Stock Volume Analysis')
4.Now, run your Streamlit app from the command line:
streamlit run stock_data.py
5.The Streamlit app should open in a new tab in your web-browser. Check out that awesome title!
Add a Mitosheet
1.Now, let's use the Mito spreadsheet to display 
CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
new_dfs, code = spreadsheet(CSV_URL)
2.You'll see a few buttons in the upper-right corner of your app asking if you'd like to rerun the app. Choose Always rerun, and you'll see your changes automatically each time you save the stock_data.py file.
3.When your app refreshes, you will see the Mito spreadsheet with Tesla stock data. Scroll around like you would in any other spreadsheet!
4.The return value of the spreadsheet is each of the tabs of the spreadsheet, as well as the code that corresponds to the edits you make in the spreadsheet. Let's display both:
st.write(new_dfs)
st.code(code)
Use the Mitosheet to Clean the Dataset
1.Take a closer look at this dataset. It looks like the first row has an invalid date. Let's remove it from our analysis by right clicking on the row label 0 and then clicking Delete Rows.
2.Turn the Date column into a datetime. Click the Filter icon next to the Date header, and in the taskpane that opens, use the Dtype dropdown to select datetime.
3.Pause here and check out the dataframes displayed below the Mitosheet. Note that each 
4.Turn the Volume column into a float. Click the Filter icon next to the Volume header, and in the taskpane that opens, use the Dtype dropdown to select float.
Use the Mitosheet to Create a Pivot Table
We're now ready to use more of Mito's advanced functionality. Let's create a pivot table that allows us to understand how the traded volume has changed over time. 
1.Click the Pivot button in the Mito toolbar. 
2.Add Date to the Rows section. Group date by year-month, so we can understand volume changes on a monthly lee. 
3.Add Volume to the Values section. Select an aggregation type of sum.
1.If you cannot select sum for Volume, you may have forgotten to change Volume to a float. See step 4 in the section above.
4.This pivot table now displayes the total of traded volume per month. If you scroll below, you will see that this pivot table is returned from the Mito spreadsheet, and the code to generate this pivot table is returned as well.
See the rest of our documentation to see what other functionality is available in Mito, or continue to our App Gallery to get ideas for how to use Mito in your Streamlit applications.
Putting it all together
That's it, you made your first app with Mito for Streamlit. Here's our finished script:
import streamlit as st
from mitosheet.streamlit.v1 import spreadsheet
​
st.set_page_config(layout="wide")
st.title('Tesla Stock Volume Analysis')
​
CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
new_dfs, code = spreadsheet(CSV_URL)
​
st.write(new_dfs)
st.code(code)
Share your app
After you’ve built an app using Mito for Streamlit, it's time to share it! To show it off to the world you can use Streamlit Community Cloud to deploy, manage, and share your app for free.
It works in 3 simple steps:
1.Put your app in a public GitHub repo (and make sure it has a requirements.txt!)
2.Sign into share.streamlit.io​
3.Click 'Deploy an app' and then paste in your GitHub URL
That's it! You now have a publicly deployed app that you can share with the world. Click to learn more about how to use Streamlit Community Cloud.

Mito for Streamlit - Previous

Streamlit Overview

Next - Mito for Streamlit

API Reference

Last modified 3mo ago