Your First Dash App with Mito

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

Make sure you've installed Mito for Dash before continuing.

The easiest way to create your first Dash application with Mito is to try things yourself. Dash has a plesant developer experience, 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 Dash 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 app.py

2. Open app.py in your favorite IDE or text editor, then add these lines:

   from dash import Dash, callback, Input, Output, html, dcc
   from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito

3. Create a Dash application, and activate the Mito spreadsheet on it. This ensures that Mito can correctly behave as a spreadsheet:

   app = Dash(__name__)
   activate_mito(app)

4. Define the app layout to have a title, a Mito spreadsheet, and a space for some output:

   CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
   
   app.layout = html.Div([
       html.H1("Stock Analysis"),
       Spreadsheet(CSV_URL, id={'type': 'spreadsheet', 'id': 'sheet'}),
       html.Div(id='output')
   ])
   
   if __name__ == '__main__':
       app.run_server(debug=True)

5. Now, run this app with

   python app.py

6. A URL should appear in your terminal with the print Dash is running on http://127.0.0.1:8050/. Open a web-browser and navigate to http://127.0.0.1:8050/, you'll see the title an a Mitosheet with some data in it!

7. You can begin to edit this data in the Mito sheet as normal - try adding a column and writing a formula.

Showing the code generated by Mito

Now, we'd like the app to display the code that the user generates by editing their analyses:

1. Add a callback that is triggered from Mito changing, using the mito_callback decorator

   @mito_callback(
       Output('output', 'children'),
       Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
   )
   def update_code(spreadsheet_result):
       return html.Div([
           html.Code(spreadsheet_result.code())
       ])
           
       
   # NOTE: Make sure this is above the if __name__ == '__main__' line...

2. Run the app again, reopen the webpage, and then edit the Mitosheet. If you now add a column to the Mitosheet, you will see all the generated code appear in the div below.

All the code together

from dash import Dash, Input, Output, html
from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito

app = Dash(__name__)
activate_mito(app)

CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'

app.layout = html.Div([
    html.H1("Stock Analysis"),
    Spreadsheet(CSV_URL, id={'type': 'spreadsheet', 'id': 'sheet'}),
    html.Div(id='output')
])

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_code(spreadsheet_result):
    return html.Div([
        html.Code(spreadsheet_result.code())
    ])
    
if __name__ == '__main__':
    app.run_server(debug=True)

Ready to build some more complex applications? Check out our app gallery:

Dash App Gallery