Press "Enter" to skip to content

Easy and Simple Emoji Picker with Using JavaScript | fgEmojiPicker.js

Emoji picker was created using vanilla javascript. fgEmojiPicker JS is a customizable and looking emoji picker implemented in Vanilla JavaScript and JSON.


  • You can attach the emoji picker to any aspect.
  • All emoji are outlined in a JSON file.
  • You can add/remove emoji by modifying the JSON.

How to make use of it:

1. Load the fgEmojiPicker.js on the HTML web page.

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

2. Initialize the emoji picker and determine the trigger component as follows:

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

3. Determine the position of the emoji picker popup.

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

4. 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;

Customizable JavaScript Emoji Picker, Emoji Picker Github/Plugin



See Demo And Download

Official Website(woody180): Click Here

This superior jQuery/javascript plugin is developed by woody180. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *