Emoji Mart

Emoji Mart is a customizable emoji picker HTML component built as a framework-agnostic web component, with a thin React wrapper for seamless JSX usage. The emoji dataset is fully decoupled from the library, letting developers control bundle size by bundling data locally or fetching it remotely on demand.

Beyond the picker UI, Emoji Mart ships an inline emoji component, a headless search index, and native-emoji lookup helpers. It supports custom emojis, custom category icons, skin tones, light/dark/auto themes, and localization in over twenty languages, making it a complete toolkit for adding emoji to any web application.

What You Get

• A themeable <em-emoji-picker> custom element with an optional React wrapper (@emoji-mart/react).
• A decoupled emoji dataset (@emoji-mart/data) that can be bundled or fetched remotely to control bundle size.
• An inline <em-emoji> component for rendering individual emojis by id, shortcode, or native character.
• A headless SearchIndex and getEmojiDataFromNative helpers for building custom emoji UIs.
• Extensive customization: custom emojis, category icons, skin tones, themes, and 20+ locale translations.

Common Use Cases

• Adding an emoji picker to a chat, comment, or messaging interface.
• Rendering emojis consistently across platforms using a chosen emoji set or native glyphs.
• Implementing emoji search or autocomplete without rendering the full picker UI.
• Supporting custom or branded emojis (including GIFs and SVGs) alongside standard sets.

Under The Hood

Architecture

Emoji Mart is a Yarn-workspaces monorepo (packages/emoji-mart, emoji-mart-data, emoji-mart-react, emoji-mart-website). The core package exposes a small surface in src/index.ts (Picker, Emoji, SearchIndex, Store, init, getEmojiDataFromNative). UI is authored as Preact components (components/Picker/Picker.tsx, components/Emoji/Emoji.tsx) and wrapped as framework-agnostic native custom elements via a shared HTMLElement base (components/HTMLElement/HTMLElement.ts) plus a Shadow-DOM variant, so <em-emoji-picker> and <em-emoji> render the Preact tree inside a web component. config.ts centralizes lazy data loading, promise-gated init(), and prop coercion, keeping the emoji dataset fully decoupled and loadable locally or over fetch.

Tech Stack

Written in TypeScript, the picker renders with Preact aliased to react/react-dom at build time (see the alias map in the package manifest), so the shipped component carries no React runtime while the separate @emoji-mart/react wrapper adapts it for React consumers. Parcel builds three targets (CommonJS main, ESM module, and a global browser bundle from src/browser.js); styles are SCSS (PickerStyles.scss). Tests run on Jest with ts-jest and jsdom.

Code Quality

The codebase is compact and readable with clear component/helper separation, though several core files opt out of strict typing with // @ts-nocheck (config.ts, search-index.ts, HTMLElement.ts), trading type safety for brevity. There is a real Jest test suite (six *.test.js files) covering config, utils, the search index, frequently-used tracking, store, and native support, exercising the headless logic rather than the rendered UI. Picker.tsx is a large (~1,135-line) single component that concentrates most rendering complexity.

API Design The public API is deliberately small and ergonomic: instantiate new Picker({ data, onEmojiSelect }), drop <em-emoji-picker> into HTML, or render <Picker /> in React with the same props. Behavior is driven by a well-documented, declarative prop table (theme, set, skin, locale, perLine, custom emojis, category icons) with sensible defaults, and headless primitives (SearchIndex.search, getEmojiDataFromNative) are available for custom UIs. The README is thorough with copy-paste examples for every entry point, giving a gentle learning curve.