Customizable JavaScript Emoji Picker – fgEmojiPicker.js

Category: Javascript | September 5, 2020
Views Total:247 views
Official Page:Go to website
Last Update:September 5, 2020


Customizable JavaScript Emoji Picker – fgEmojiPicker.js


fgEmojiPicker.js is a customizable, nice-looking emoji picker implemented in vanilla JavaScript and JSON.


  • You can attach the emoji picker to any element.
  • All emoji are defined in a JSON file.
  • You can add/remove emoji by editing the JSON.

How to use it:

1. Upload fgEmojiPicker.js and full-emoji-list.json files to the webserver.

2. Load the fgEmojiPicker.js on the HTML page.

<script src="fgEmojiPicker.js"></script>

3. Initialize the emoji picker and determine the trigger element as follows:

<button>Pick emoji</button>
new FgEmojiPicker({
    trigger: ['button', 'textarea']

4. Determine the position of the emoji picker popup.

new FgEmojiPicker({
    trigger: ['button', 'textarea'],
    position: ['bottom', 'right']

5. Trigger a function after an emoji is picked.

new FgEmojiPicker({
    trigger: ['button', 'textarea'],
    position: ['bottom', 'right'],
    emit(obj, triggerElement) {
      const emoji = obj.emoji;
      document.querySelector('textarea').value += emoji;



  • update events

You Might Be Interested In:

Leave a Reply