Jupyter Dash

0.4.2 · active · verified Thu Apr 16

Jupyter Dash integrates Plotly Dash applications directly into Jupyter environments like Jupyter Notebook, JupyterLab, and Google Colab. It allows for the development and display of interactive Dash apps within cells, supporting various display modes including inline, external, and JupyterLab extensions. The current version is 0.4.2, and releases are made as needed to address compatibility with Dash and Jupyter ecosystem updates.

Common errors

```
ImportError: cannot import name 'skip' from 'werkzeug.local'
```
cause Using `jupyter-dash` version older than 0.4.2 with `werkzeug` version 2.1.0 or newer.

fix pip install --upgrade jupyter-dash
```
AttributeError: Read-only: requests_pathname_prefix
```
cause Using `jupyter-dash` version older than 0.4.1 with `dash` version 2.1.0 or newer.

fix pip install --upgrade jupyter-dash
```
JupyterDash app fails to display or throws server errors in JupyterLab 3.0
```
cause Using `jupyter-dash` version older than 0.4.0 with JupyterLab 3.0 or newer.

fix pip install --upgrade jupyter-dash

Warnings

breaking JupyterDash versions prior to 0.4.2 are incompatible with `werkzeug` versions 2.1.0 and later, leading to `ImportError: cannot import name 'skip' from 'werkzeug.local'`.
Fix: Upgrade `jupyter-dash` to version 0.4.2 or newer: `pip install --upgrade jupyter-dash`. Alternatively, downgrade `werkzeug` to a version prior to 2.1.0 if upgrading `jupyter-dash` is not an option.
breaking JupyterDash versions prior to 0.4.1 are incompatible with `dash` versions 2.1.0 and later, resulting in an `AttributeError: Read-only: requests_pathname_prefix`.
Fix: Upgrade `jupyter-dash` to version 0.4.1 or newer: `pip install --upgrade jupyter-dash`. Alternatively, downgrade `dash` to a version prior to 2.1.0.
breaking JupyterDash versions prior to 0.4.0 do not support JupyterLab 3.0+ due to significant changes in JupyterLab's server architecture.
Fix: Upgrade `jupyter-dash` to version 0.4.0 or newer: `pip install --upgrade jupyter-dash`.
gotcha The default display width for `mode='inline'` changed from a fixed value to `100%` in version 0.3.0, which might alter the visual layout of your inline Dash apps.
Fix: If you rely on the previous fixed width, you'll need to explicitly set the width using CSS within your Dash application's layout. No action is needed if the new default is acceptable.

Install

pip install jupyter-dash Install jupyter-dash

Imports

JupyterDash
```
from jupyter_dash import JupyterDash
```

Quickstart

This quickstart demonstrates how to create a simple interactive Dash application and display it directly within a Jupyter notebook or JupyterLab environment using `JupyterDash`. The `mode` parameter in `run_server` determines how the application is displayed (e.g., inline within the cell, or as a separate tab/window). Ensure `dash_html_components` and `dash_core_components` are also installed (`pip install dash`).

import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# Create a Dash app in a Jupyter environment
app = JupyterDash(__name__)

app.layout = html.Div([
    html.H1("JupyterDash Test"),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC'
    ),
    html.Div(id='output-container')
])

@app.callback(
    Output('output-container', 'children'),
    Input('dropdown', 'value')
)
def display_value(value):
    return f'You have selected "{value}"'

# Run the app. For JupyterLab/Notebook use mode="inline" or "jupyterlab"
# For Google Colab, use mode="external" or omit mode
# You might need to adjust the port if it's already in use
# For colab, 'mode="jupyterlab"' will often also work
app.run_server(mode="inline", port=8050, debug=True)

view raw JSON →