Getting Started

Install dash-email and build your first email template in minutes.

Installation

Install from PyPI:

pip install dash-email

dash-email requires Python 3.9+ and Dash 4.2+.

Your first email

Every email starts with the same skeleton: Email → EmailBody → EmailContainer → content. The components render table-based, inline-styled HTML that survives Gmail, Outlook, and Apple Mail.

Source code:

# File: docs/getting-started/quickstart.py

import dash_email as de

component = de.Email(
    lang="en",
    children=[
        de.EmailBody(
            style={"backgroundColor": "#f6f9fc", "padding": "40px 0"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "40px",
                        },
                        children=[
                            de.EmailHeading(
                                "Welcome!",
                                as_="h1",
                                style={"color": "#1a1a1a", "marginBottom": "16px"},
                            ),
                            de.EmailText(
                                "Thanks for signing up. We're excited to have you!",
                                style={"color": "#666666", "lineHeight": "1.6"},
                            ),
                            de.EmailButton(
                                "Get Started",
                                href="https://example.com",
                                style={
                                    "backgroundColor": "#228be6",
                                    "color": "#ffffff",
                                    "padding": "12px 24px",
                                    "borderRadius": "4px",
                                    "fontWeight": "bold",
                                },
                            ),
                        ],
                    )
                ])
            ],
        )
    ],
)

Components are callback-ready

Every dash-email component is a first-class Dash component — give it an id and update it from callbacks like any other component. Type in the input below and watch the email headline update:

Source code:

# File: docs/getting-started/interactive.py

import dash_email as de
import dash_mantine_components as dmc
from dash import Input, Output, callback

component = dmc.Stack([
    dmc.TextInput(
        id="gs-headline-input",
        label="Headline",
        value="Hello from Dash Email",
        maw=400,
    ),
    de.Email([
        de.EmailBody(
            style={"backgroundColor": "#f6f9fc", "padding": "24px 0"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "32px",
                        },
                        children=[
                            de.EmailHeading(
                                "Hello from Dash Email",
                                id="gs-headline-output",
                                as_="h2",
                            ),
                            de.EmailText(
                                "Email components are regular Dash components — "
                                "drive them with callbacks like anything else."
                            ),
                        ],
                    )
                ])
            ],
        )
    ]),
], gap="md")


@callback(
    Output("gs-headline-output", "children"),
    Input("gs-headline-input", "value"),
)
def update_headline(value):
    return value or "Hello from Dash Email"

The component set

Styling rules for email

Email clients strip <style> tags and ignore most modern CSS. dash-email components accept a style prop with camelCase CSS that is rendered inline — stick to inline styles, table-based layout (EmailRow/EmailColumn), and keep content width at 600px or less.

Next steps

• Explore each component group in the sidebar — every page has isolated, runnable examples.
• Open the Email Builder to generate templates with AI, preview them live, and send test emails via Resend.

Source: /getting-started