# Your First Dash App with Mito

{% hint style="info" %}
Make sure you've installed [Mito for Dash](/getting-started/installing-mito/installing-mito-for-dash.md) 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="/pages/IBs7Dy09NDVqlLgPlIrx" %}
[Dash App Gallery](/mito-for-dash/dash-app-gallery.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trymito.io/mito-for-dash/your-first-dash-app-with-mito.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.