# Your First Dash App with Mito

{% hint style="info" %}
Make sure you've installed [Mito for Dash](https://docs.trymito.io/getting-started/installing-mito/installing-mito-for-dash) before continuing.
{% endhint %}

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. 

{% hint style="info" %}
To see the finished script, [scroll down](#all-the-code-together).
{% endhint %}

## 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:

   ```python
   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:

   ```python
   app = Dash(__name__)
   activate_mito(app)
   ```
4. Define the app layout to have a title, a Mito spreadsheet, and a space for some output:

   ```python
   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

   ```bash
   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   

   ```python
   @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

```python
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:

{% content-ref url="dash-app-gallery" %}
[dash-app-gallery](https://docs.trymito.io/mito-for-dash/dash-app-gallery)
{% endcontent-ref %}