# dash-emoji-mart — emoji picker for Dash

> dash-emoji-mart — an emoji picker for Plotly Dash 4. Wraps emoji-mart as a single Dash component: search, six skin tones, a frequently-used row, 22 locales, custom image/GIF/SVG categories and any of Iconify's 150+ icon sets. The emoji data set ships inside the bundle, so the picker works offline and makes no requests of its own. By Pip Install Python.

### Overview

`dash-emoji-mart` wraps [emoji-mart](https://github.com/missive/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:

```python
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

```bash
pip install dash-emoji-mart
```

Iconify icon-set support is an optional extra — see [Iconify icon sets](/iconify):

```bash
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](/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](/iconify).

### Where to go next

* [Configuration](/configuration) — every layout and sizing prop, live.
* [Theming](/theming) — light, dark and following the app's colour scheme.
* [Callbacks & props](/callbacks) — `value` vs `selectedEmoji`, outside clicks, persistence.
* [Picker in a popover](/popover) — the pattern most apps actually want.
* [API reference](/api-reference) — the full prop table.

### Source


```python
# 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
```

## Other sizes of this document

- [/llms-small.txt](https://emojimart.2plot.dev/llms-small.txt): compact briefing — start here if context is tight. (3.5 KB, ~888 tok)
- [/llms.txt](https://emojimart.2plot.dev/llms.txt): this document — the index you are reading. (11.5 KB, ~3.0k tok)
- [/llms-full.txt](https://emojimart.2plot.dev/llms-full.txt): every page's prose in one document — 10 pages. (109.9 KB, ~28.1k tok)

## Access policy

- Terms: these documents are free to fetch. A free account unlocks any gated document.
- Identity: agents may present a key by appending `?key=<value>` to any document URL. Get one: https://2plot.ai
- Rate: prefer ONE `/llms-full.txt` fetch over N per-page fetches. On 429, honour `Retry-After` and back off exponentially.
- Coordination: start at https://2plot.dev/llms.txt — one index enumerates every site; do not rediscover the network by crawling it.
- Crawler policy (mirrors /robots.txt): allowed: GPTBot, ClaudeBot, CCBot, Google-Extended, FacebookBot, Omgili, ByteSpider, Amazonbot, Applebot-Extended, meta-externalagent, AI2Bot, Diffbot, Timpibot, ImagesiftBot, ChatGPT-User, Claude-User, Claude-SearchBot, PerplexityBot, OAI-SearchBot, Perplexity-User, Googlebot, Bingbot, Slurp, DuckDuckBot, GoogleOther, Google-InspectionTool, Storebot-Google, AdsBot-Google.
- Accounting: every document read is logged with the requesting vendor (verified against published IP ranges where the operator publishes them). See https://2plot.dev/llms.txt

## Pages

Every page in this application. Each has a Markdown version at the `llms.txt` URL beside it.

- [dash-emoji-mart — emoji picker for Dash](https://emojimart.2plot.dev/): dash-emoji-mart — an emoji picker for Plotly Dash 4. Wraps emoji-mart as a single Dash component: search, six skin tones, a frequently-used row, 22 locales, custom image/GIF/SVG categories and any of Iconify's 150+ icon sets. The emoji data set ships inside the bundle, so the picker works offline and makes no requests of its own. By Pip Install Python.
  - Machine-readable: https://emojimart.2plot.dev/llms.txt (11.5 KB, ~3.0k tok)
- [API](https://emojimart.2plot.dev/api): Component props reference for dash_emoji_mart.
  - Machine-readable: https://emojimart.2plot.dev/api/llms.txt (6.0 KB, ~1.5k tok)
- [API Reference](https://emojimart.2plot.dev/api-reference): Every prop on DashEmojiMart, generated from the component itself.
  - Machine-readable: https://emojimart.2plot.dev/api-reference/llms.txt (1.7 KB, ~435 tok)
- [Callbacks & Props](https://emojimart.2plot.dev/callbacks): value vs selectedEmoji, reacting to outside clicks, and persisting a selection across reloads.
  - Machine-readable: https://emojimart.2plot.dev/callbacks/llms.txt (9.1 KB, ~2.3k tok)
- [Changelog](https://emojimart.2plot.dev/changelog): Version history of dash-emoji-mart, rendered from CHANGELOG.md.
  - Machine-readable: https://emojimart.2plot.dev/changelog/llms.txt (36.9 KB, ~9.4k tok)
- [Configuration](https://emojimart.2plot.dev/configuration): Every layout, sizing and locale prop, wired to live controls so you can see what each one does.
  - Machine-readable: https://emojimart.2plot.dev/configuration/llms.txt (15.8 KB, ~4.0k tok)
- [Custom Emojis](https://emojimart.2plot.dev/custom-emojis): Add your own categories of images, GIFs and SVGs — with their own nav icons — alongside the built-in emojis.
  - Machine-readable: https://emojimart.2plot.dev/custom-emojis/llms.txt (10.7 KB, ~2.7k tok)
- [Iconify Icon Sets](https://emojimart.2plot.dev/iconify): Turn any of Iconify's 150+ icon sets — twemoji, OpenMoji, Fluent Emoji, Tabler — into pickable categories.
  - Machine-readable: https://emojimart.2plot.dev/iconify/llms.txt (11.6 KB, ~3.0k tok)
- [Picker in a Popover](https://emojimart.2plot.dev/popover): The pattern most apps actually want — a trigger button that opens the picker, and closes it on pick or on an outside click. One callback.
  - Machine-readable: https://emojimart.2plot.dev/popover/llms.txt (10.4 KB, ~2.7k tok)
- [Theming](https://emojimart.2plot.dev/theming): Light, dark and auto — and how to make the picker follow your app's colour scheme instead of the OS.
  - Machine-readable: https://emojimart.2plot.dev/theming/llms.txt (5.3 KB, ~1.4k tok)

## About The 2plot network

Open-source Dash component libraries by Pip Install Python. Each component has its own documentation site and its own llms.txt; 2plot.dev indexes all of them, and 2plot.ai is the hub.

Network index: [https://2plot.dev](https://2plot.dev/llms.txt)

## Network

Other applications in this network. Same operator; each one serves its own `/llms.txt` in this format.

- [2plot.ai](https://2plot.ai): Network hub and account origin.
  - Machine-readable: https://2plot.ai/llms.txt
- [2plot.dev](https://2plot.dev): Package index for every open-source component in the network.
  - Machine-readable: https://2plot.dev/llms.txt
- [Documentation boilerplate](https://boilerplate.2plot.dev): The markdown-driven documentation template every satellite site is built from.
  - Machine-readable: https://boilerplate.2plot.dev/llms.txt
- [dash-leaflet2](https://leaflet.2plot.dev): Leaflet 2 maps as Dash components.
  - Machine-readable: https://leaflet.2plot.dev/llms.txt
- [dash-mui-scheduler](https://muischeduler.2plot.dev): MUI X Scheduler — calendars and event scheduling for Dash.
  - Machine-readable: https://muischeduler.2plot.dev/llms.txt
- [dash-mui-charts](https://muicharts.2plot.dev): MUI X charts, tree views and time pickers for Dash.
  - Machine-readable: https://muicharts.2plot.dev/llms.txt
- [flexlayout-dash](https://flexlayout.2plot.dev): IDE-style dockable, resizable and floatable window panels.
  - Machine-readable: https://flexlayout.2plot.dev/llms.txt
- [dash-improve-my-llms](https://llms.2plot.dev): The AI/LLM and SEO package every site in this network is built on.
  - Machine-readable: https://llms.2plot.dev/llms.txt
- [dash-flows](https://flows.2plot.dev): Node-graph editors built on React Flow.
  - Machine-readable: https://flows.2plot.dev/llms.txt
- [dash-pannellum](https://pannellum.2plot.dev): 360° panorama and virtual-tour viewer.
  - Machine-readable: https://pannellum.2plot.dev/llms.txt
- [dash-email](https://email.2plot.dev): Email composition and delivery components.
  - Machine-readable: https://email.2plot.dev/llms.txt
- [dash-model-viewer](https://modelviewer.2plot.dev): 3D model viewer with AR support, built on Google's model-viewer.
  - Machine-readable: https://modelviewer.2plot.dev/llms.txt
- [dash-excalidraw](https://excalidraw.2plot.dev): Excalidraw virtual whiteboard and sketching canvas.
  - Machine-readable: https://excalidraw.2plot.dev/llms.txt

## Related projects

Projects by the same author on their own domains. Built on the same stack, but not part of the primary network.

- [Pirate's Bargain](https://piratesbargain.com): Deal aggregator built on the same Dash stack.
  - Machine-readable: https://piratesbargain.com/llms.txt
- [ai-agent.buzz](https://ai-agent.buzz): Agent tooling directory.
  - Machine-readable: https://ai-agent.buzz/llms.txt
- [2plot.media](https://2plot.media): Media and streaming, on the same Dash stack.
  - Machine-readable: https://2plot.media/llms.txt

## External references

Third-party documentation this project depends on or references. Not affiliated — listed so an agent can follow a dependency directly instead of searching for it.

- [Dash Mantine Components](https://www.dash-mantine-components.com): The UI component layer these docs are built with.
  - Machine-readable: https://www.dash-mantine-components.com/llms.txt
- [Plotly Dash documentation](https://dash.plotly.com): Upstream framework documentation.
  - Machine-readable: https://dash.plotly.com/llms.txt