EmojiPanel is a Javascript emoji picker that used to
be a popular Chrome extension for Twitter!

  • Select and write emoji using any sprite sheet
  • Keep track of users frequently used emojis
  • Lots of options & customisable SCSS styles
  • Listen for events such as select or search
  • 43kb ~ 12kb gzipped

Get Started

npm i emojipanel

Static mode

The container is the element that the panel is appended to, it is required. By not
specifying a trigger, the panel will always be visible, as shown above.

new EmojiPanel({
        container: '#container'

Trigger mode

In trigger mode, the EmojiPanel is hidden until triggered by a button or manually with toggle().
Set trigger to true to allow the panel to be manually triggered. Trigger example

new EmojiPanel({
        container: '#container',
        trigger: '#btn-trigger'


The panel can add emoji characters to a text input or contenteditable element.

new EmojiPanel({
        container: '#container',
        editable: '#input'


Option Default Description
search true Enable the search feature
frequent true Enable the frequently used feature
fitzpatrick 'a' The initial skin tone modifier. Set to false to disable
hidden_categories [] Hide certain emoji categories from the results
pack_url URL to the Emoji sprites
json_url '/emojis.json' URL to the Emojis JSON file
tether true Whether to tether the panel to the trigger
placement 'bottom' How the dropdown should be tethered: top, right, bottom, left
locale {} See Translations
icons {} The elements to use as icons: search


  • toggle - Manually trigger the panel
  • reposition - Realign the panel's tether to the trigger


Set the locale object in options to change the translations for:

  • add - Add emoji
  • brand - EmojiPanel - Remove watermark with ''
  • frequent - Frequently used
  • loading - Loading...
  • no_results - No results
  • search - Search
  • search_results - Search results