missive/emoji-mart
Emoji Mart
Emoji Mart is a set of web components and tools for adding a searchable, customizable emoji picker to web applications. It provides a picker component for browsing and selecting emojis by category, a rendering component for displaying individual emojis from shortcodes or IDs, and a programmatic search library for looking up emoji metadata by keyword, native character, or shortcode.
The library structures emoji data into a precomputed index that supports real-time search filtering, category-based virtual scrolling, and skin tone modifiers. Custom emoji sets can be injected at runtime, merging user-defined images and keywords with the built-in library. The picker interface can be localized into over twenty languages through separate translation bundles, and its visual appearance—including theme, icon style, and navigation—can be adjusted to match the host application.
Emoji Mart also offers a custom emoji set manager for adding user-defined emojis with custom images, keywords, and skin tones. The components are rendered as custom HTML elements using the Web Components standard, making them framework-agnostic and reusable across different web projects.
Features
- Emoji Pickers - Ships a customizable, searchable emoji picker web component with multiple emoji sets and skin tone support.
- Emoji Search Tools - Ships a programmatic search engine that returns emoji metadata by keyword, native character, or shortcode.
- Real-Time Emoji Searches - Filters the emoji list in real time as the user types a keyword or name.
- Emoji - Displays emojis grouped into categories so users can visually scan and pick the one they want.
- Curated Emoji Metadata Collections - Provides a precomputed index mapping emoji IDs, keywords, and native characters for fast lookup.
- Search-As-You-Type Filters - Filters the emoji index in real time as the user types, using keyword and name matching for instant results.
- Emoji Image Renderers - Displays an individual emoji by its shortcode or ID using a dedicated web component.
- Web Component Emoji Renderers - Provides a dedicated web component for rendering individual emojis from shortcodes or IDs.
- Web Component Renderers - Renders the picker and individual emojis as custom HTML elements using the Web Components standard.
- Custom Emoji Management - Provides a manager for adding user-defined emojis with custom images, keywords, and skin tones.
- UI Localization - Switches the picker's interface labels to one of over twenty supported languages for a localized experience.
- Appearance Customizations - Allows adjusting the picker's theme, icon style, navigation, and preview layout to match the host application.
- Interface Localizations - Switches the picker's labels and messages to a supported language by loading a translation file.
- Localized - Provides an emoji picker interface localized into over twenty languages for international users.
- Emoji Skin Tone Modifiers - Applies skin tone variants to emojis via a modifier system using Unicode sequences.
- Emoji Skin Tone Selectors - Provides controls for choosing a skin tone modifier for applicable emojis before inserting them into content.
- Custom Emoji Registries - Injects user-defined emojis with custom images and keywords into the emoji index at runtime.
- Emoji Picker Localizations - Ships translation bundles for over twenty languages to localize the emoji picker interface.
- Locale Translation Bundles - Ships separate locale bundles that allow the picker interface to switch languages without recompilation.
