โœฆ Open Source Library

EmojiPicker
.js v2

A flexible, event-driven emoji picker. Zero dependencies. Full developer control. Now with IndexedDB caching, favorites, i18n, emoji support detection and TypeScript.

โšกEvent-driven API
๐ŸŽจCSS Variables
๐Ÿ”Fuzzy search
๐ŸฝSkin tones
โ™ฟARIA accessible
๐Ÿ“ฆZero dependencies
๐Ÿ’พIndexedDB cache
โญFavorites
๐ŸŒi18n โ€” 6 languages
๐Ÿ”ŽEmoji support detection
๐Ÿ“˜TypeScript .d.ts
๐Ÿ”‹Preload API

Live Demos

All examples share the same v2 library. Fully self-contained โ€” no external files needed.

Example 01
Insert into text input at cursor
const picker = new EmojiPicker({ container: "#btn" }) picker.on("emojiClick", (emoji) => { input.value += emoji.char })
Example 02
Copy to clipboard
โœ“ Copied!
picker.on("emojiClick", (emoji) => { navigator.clipboard.writeText(emoji.char) })
Example 03
Full event data object
Click an emoji to see the payloadโ€ฆ
Example 04
Reactions / voting system
What do you think of this library?
picker.on("emojiClick", (emoji) => { sendToServer(emoji.name) updateUI(emoji.char) })
Example 05
attachToInput() โ€” one-liner helper
// Wraps any input, inserts at cursor EmojiPicker.attachToInput("#ta-auto")
Example 06
Light theme variant
new EmojiPicker({ container: "#btn", theme: "light" })
Example 07 NEW v2
Favorites โ€” most-clicked emojis via IndexedDB
TOP FAVORITES (updates on close)
Pick some emojis to build your favoritesโ€ฆ
const favs = await picker.getTopFavorites(8) picker.on("pickerClose", async () => { const top = await picker.getTopFavorites(8) renderFavBar(top) })
Example 08 NEW v2
i18n โ€” switch language at runtime
new EmojiPicker({ locale: "de" }) picker.setLocale("ja")
Example 09 NEW v2
Preload โ€” warm up IndexedDB cache on startup
Caching emoji dataโ€ฆ
// Call at app startup await EmojiPicker.preload({ dataUrl }) // First open is now instant
Example 10 NEW v2
IndexedDB recents โ€” persistent across sessions
await picker.clearRecent() await picker.clearFavorites()
Example 11
Inline mode โ€” always visible, embedded in page
Selected:
new EmojiPicker({ container: "#inline-demo", mode: "inline", theme: "dark", autoClose: false })