Dash Cheat Sheet

01Setup & Appthe boilerplate

from dash import Dash, dcc, html, Input, Output, State, callback★
The imports nearly every app needs.
app = Dash(__name__)★
Create the app; pass external_stylesheets= if needed.
app.layout = html.Div([ … ])★
Assign the component tree (a list works too).
if __name__ == "__main__": app.run(debug=True)★
debug=True gives hot-reload + error overlay.
server = app.server
The underlying WSGI/ASGI app — for gunicorn app:server.
Dash(__name__, backend="fastapi")
Dash 4.2+: run on Flask (default), FastAPI, or Quart.

02Layout · HTMLdash.html · the tags

html.Div(children=[ … ])★
The generic container; children is the first positional arg.
html.H1("Title"), html.P("text")★
One class per HTML tag (H1…H6, Span, Label, A, Img).
html.Button("Click", id="btn")★
Its n_clicks property is the classic callback Input.
html.A("link", href="/page")
Anchor; use dcc.Link for in-app navigation.
id="my-id"★
The handle callbacks use — must be unique.
className="row", style={ … }
className for CSS classes; style for inline (card 3).

03Layout · stylenesting & CSS

style={"backgroundColor": "navy", "padding": 10}★
Inline CSS as a dict — keys are camelCase.
html.Div([html.H1(…), dcc.Graph(…)])
Nest components to build the tree.
Dash(__name__, external_stylesheets=[…])
Load CSS / themes (e.g. a Bootstrap URL).
import dash_bootstrap_components as dbc
dbc.Row/dbc.Col/dbc.Card for responsive grids.
import dash_mantine_components as dmc
Modern component kit — a popular alternative to dbc.
# assets/ folder auto-loads .css & .js
Drop files in assets/ and Dash serves them.

04Core Componentsdash.dcc · controls

dcc.Graph(id="g", figure=fig)★
Renders a Plotly figure; the heart of most apps.
dcc.Dropdown(options=[…], value="a")★
Callback reads its value; multi=True for many.
dcc.Slider(min=0, max=10, value=5)★
RangeSlider for a low–high pair.
dcc.Input(type="number", debounce=True)
debounce waits for Enter/blur before firing.
dcc.Checklist(…) · dcc.RadioItems(…)
Multi-select vs single-select.
dcc.DatePickerRange(…) · dcc.Tabs(…)
Dates and tabbed sections.
dcc.Markdown("# hi")
Render Markdown (with optional mathjax=True).

05dcc · data & utilitythe invisible helpers

dcc.Store(id="s", storage_type="session")★
Keep data client-side: memory·session·local.
dcc.Interval(interval=1000, n_intervals=0)
Tick every N ms — drives live/streaming updates.
dcc.Location(id="url")
Read/route the browser URL (multi-page nav).
dcc.Upload(…) · dcc.Download(…)
File in / file out (pair with dcc.send_data_frame).
dcc.Loading(children=dcc.Graph(…))
Auto spinner while a wrapped output updates.

06The @callbackwhat makes it react ★

@callback(★
Decorator, directly above the function (no blank line).
Output("out", "figure"),updates
(component id, property) that receives the return.
Input("ctrl", "value"))triggers
Any change here re-runs the callback.
def update(value): return fig★
Args match Inputs by position; the return goes to Output.
# ids must exist in app.layout
Every referenced id/property must be in the layout.
# every property is reactive
Any component property can be an Input or Output.

07Multiple I/O & Statewiring it up

Input("a","value"), Input("b","value")★
Many Inputs → many function args, in order.
Output("x","children"), Output("y","figure")
Many Outputs → return a, b (a tuple).
State("in", "value")read-only
Read a value without triggering — pair with a Button Input.
prevent_initial_call=True★
Skip the automatic call when the app first loads.
# chaining: one Output is another's Input
Callbacks fire in dependency order automatically.

08Context & controlctx · skip · duplicate

from dash import ctx★
The callback context (alias of callback_context).
ctx.triggered_id★
Which component id actually fired the callback.
return dash.no_update★
Leave an Output unchanged (per-output with a tuple).
raise PreventUpdate
Abort the whole callback — update nothing.
Output("o","children", allow_duplicate=True)
Let a second callback also target that Output.

09Interactive graphingdcc.Graph as an Input

Input("g", "hoverData")★
React to the point under the cursor.
Input("g", "clickData")
React to a clicked point.
Input("g", "selectedData")
Box/lasso selection → crossfilter other charts.
Input("g", "relayoutData")
Zoom/pan ranges — sync views together.
fig.update_layout(clickmode="event+select")
Enable click-to-select on the figure.

10Pattern-matchingdynamic components

from dash import MATCH, ALL, ALLSMALLER★
Wildcards for components created at runtime.
id={"type": "filter", "index": i}★
Give dynamic components a dict id.
Input({"type": "filter", "index": MATCH}, "value")★
MATCH — fires once, for the one that changed.
Input({"type": "filter", "index": ALL}, "value")
ALL — collects every match into a list.
ctx.triggered_id["index"]
Read which dict-id instance fired.

11Patch & clientsidefast partial updates

from dash import Patch★
Update part of a prop without resending the whole thing.
p = Patch(); p["data"][0]["x"] = xs; return p
Great for appending to figures / editing lists in place.
dash.clientside_callback("function(x){…}", …)★
Run JS in the browser — zero server round-trip.
ClientsideFunction(namespace=, function_name=)
Reference JS from your assets/ folder.

12Background callbackslong-running work

@callback(…, background=True)★
Run off the request thread so the UI stays responsive.
manager = DiskcacheManager(…)
Dev; use CeleryManager for production.
running=[(Output("btn","disabled"), True, False)]
Toggle props while it runs (disable a button, show a spinner).
progress=[Output("bar","value")]
Stream progress to a component as it works.
cancel=[Input("cancel","n_clicks")]
Let the user abort a running job.

13Multi-page appsuse_pages

Dash(__name__, use_pages=True)★
Turn on the built-in pages system.
dash.register_page(__name__, path="/")★
Call it at the top of each file in pages/.
dash.page_container★
Put this in app.layout where pages should render.
dash.page_registry
Iterate registered pages to build a nav bar.
dcc.Link("Home", href="/")
Client-side navigation — no full reload.

14Share data & deploystate · production

dcc.Store as an Output, then an Input★
The right way to pass data between callbacks.
# data must be JSON-serializable
Stores hold JSON — convert DataFrames with .to_dict().
# don't mutate module globals
Callbacks must be stateless — workers don't share memory.
gunicorn app:server★
Production server; server = app.server first.
app.run(host="0.0.0.0", port=8050)
Expose it; default is 127.0.0.1:8050.

15The reactive modelthe one big idea ★

app.layout = a tree of components★
What the app looks like — declarative, in the browser.
@callback = Python that reacts★
How it behaves — runs on the server.
Input triggerstriggers
A change to this property re-runs the callback.
Output updatesupdates
The return value is written to this property.
State reads without triggering
Grab a value only when something else fires.
every property is reactive; Dash syncs the rest★
You wire dependencies; Dash handles the round-trips.

16Gotchasthe usual traps

blank line under @callbackbreaks
The decorator must sit directly above the function.
id not in layout
Every callback id/prop must exist in app.layout.
two callbacks → one Output
Needs allow_duplicate=True on the Output.
style={"background-color": …}
Wrong — style keys are camelCase (backgroundColor).
app.run_server(…)renamed
Dash 3.0+: use app.run().
import dash_core_componentsremoved
Dash 3.0+: from dash import dcc, html.
mutating a global in a callback
Non-deterministic across workers — use dcc.Store.

dash cheat sheet

Four ideas worth a picture

the layout is a tree

how a callback lines up

Input triggers, State just reads

MATCH vs ALL for dynamic UIs

Worth memorizing