dash-emoji-mart — emoji picker for Dash

Overview

dash-emoji-mart wraps emoji-mart — the picker behind Missive, and the one most React apps reach for — as a single Dash component.

One import, one component, no clientside setup:

from dash import Dash, callback, html, Input, Output
from dash_emoji_mart import DashEmojiMart

app = Dash(__name__)
app.layout = html.Div([
    DashEmojiMart(id="picker"),
    html.Div(id="out", style={"fontSize": 48}),
])

@callback(Output("out", "children"), Input("picker", "value"))
def show(value):
    return value or "Pick one"

if __name__ == "__main__":
    app.run(debug=True)

The full emoji data set is bundled inside the component, so the picker works offline and makes no requests of its own.

Install

pip install dash-emoji-mart

Iconify icon-set support is an optional extra — see Iconify icon sets:

pip install "dash-emoji-mart[iconify]"

Live demo

What you get

Everything emoji-mart does out of the box: fuzzy search across names, keywords and shortcodes, six skin tones, a per-browser "frequently used" row, and 10 UI locales.

Add categories of your own images, GIFs or SVGs with custom=, and give each one a nav icon with categoryIcons=. See Custom emojis.

dash_emoji_mart.iconify converts any Iconify set — twemoji, openmoji, Fluent Emoji, or a non-emoji set like Tabler — into pickable categories. See Iconify icon sets.

Where to go next

• Configuration — every layout and sizing prop, live.
• Theming — light, dark and following the app's colour scheme.
• Callbacks & props — value vs selectedEmoji, outside clicks, persistence.
• Picker in a popover — the pattern most apps actually want.
• API reference — the full prop table.

Source

# File: docs/home/example.py

"""The smallest useful DashEmojiMart: a picker and a readout of what was picked.

`value` is a plain string — the native glyph for a standard emoji. `selectedEmoji`
carries the whole emoji-mart object alongside it, which is where the name and shortcode
below come from.
"""

import dash_mantine_components as dmc
from dash import Input, Output, callback, html

from dash_emoji_mart import DashEmojiMart

component = dmc.Group(
    [
        DashEmojiMart(
            id="home-picker",
            perLine=9,
            emojiSize=24,
            maxFrequentRows=2,
            previewPosition="none",
        ),
        dmc.Paper(
            [
                dmc.Text("Selected", size="sm", c="dimmed"),
                html.Div(
                    id="home-picker-glyph",
                    style={"fontSize": 56, "minHeight": 70, "lineHeight": 1.2},
                ),
                dmc.Text(id="home-picker-name", size="sm", fw=500),
                dmc.Text(id="home-picker-shortcode", size="xs", c="dimmed"),
            ],
            withBorder=True,
            p="lg",
            radius="md",
            style={"minWidth": 200, "textAlign": "center"},
        ),
    ],
    align="flex-start",
    gap="xl",
)


@callback(
    Output("home-picker-glyph", "children"),
    Output("home-picker-name", "children"),
    Output("home-picker-shortcode", "children"),
    Input("home-picker", "selectedEmoji"),
)
def show(emoji):
    if not emoji:
        return dmc.Text("Nothing yet", c="dimmed", size="lg"), "", ""
    shortcodes = emoji.get("shortcodes") or ""
    return emoji.get("native", ""), emoji.get("name", ""), shortcodes