explaingit

missive/emoji-mart

9,387TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A web component that adds an emoji picker to any web app, users click an emoji and your app receives the selection via callback. Works with React or plain HTML, with custom emoji support and 20+ languages.

Mindmap

mindmap
  root((emoji-mart))
    What it does
      Emoji picker UI
      Headless search
      Custom emojis
    Tech Stack
      TypeScript
      Web Components
      React package
    Use Cases
      Chat apps
      Comment inputs
      Emoji search
    Config Options
      Themes dark light
      Categories filter
      20 plus languages
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add an emoji picker popup to a chat or comment input field in a web app

USE CASE 2

Build a React messaging app with full emoji support using the dedicated React package

USE CASE 3

Add custom animated GIF or SVG emojis alongside the standard emoji set

USE CASE 4

Search emoji data programmatically without rendering any picker UI

Tech stack

TypeScriptJavaScriptWeb ComponentsReact

Getting it running

Difficulty · easy Time to first run · 5min
No explicit license is stated in the README, though the repository is described as open source.

In plain English

Emoji Mart is a web component that adds an emoji picker to any web application. You drop it into your page and users get a popup or panel showing the full range of standard emojis, organized into categories like people, nature, food, and flags. When a user clicks an emoji, a callback fires with the selection so your app can do something with it, such as inserting it into a message input. The component works with React through a dedicated package, but it also runs in plain HTML pages without any framework. The emoji data, meaning the actual list of all emojis and their metadata, is shipped as a separate package. You can bundle that data directly into your app for instant loading, or fetch it on demand from a content delivery network to keep your initial page size smaller. Configuration options are extensive. You can control which emoji categories appear, set the default skin tone, choose between light and dark themes, resize the buttons and emoji images, adjust where the search bar and preview appear, and limit which specific emojis are shown. The picker supports over 20 languages for its interface labels. It also supports custom emojis, meaning you can define your own image-based entries, including animated GIFs and SVGs, and group them into named categories alongside the standard ones. Beyond the visual picker, the library offers a headless search function that lets you query emoji data programmatically without rendering any UI, and a utility to look up emoji metadata from a native emoji character. The project is built by the Missive team, which makes a team email and chat product. It carries no explicit license statement in the README, though the repository description indicates it is open source.

Copy-paste prompts

Prompt 1
Add emoji-mart to my React chat app so users can click a button to open an emoji picker and insert emojis into a text input
Prompt 2
Configure emoji-mart to show only food and nature categories with a dark theme and larger emoji buttons
Prompt 3
How do I define custom animated GIF emojis in emoji-mart and group them into a named category alongside standard emojis
Prompt 4
Set up emoji-mart in a plain HTML page without React or any other framework
Prompt 5
Use emoji-mart's headless search API to find all emojis matching a keyword without rendering the picker component
Open on GitHub → Explain another repo

← missive on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.