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

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


  • It is only one .js file without CSS or other files
  • There is no jQuery or other libraries
  • Simplicity of usage
  • Multiple textareas and triggers
  • Draggable emoji picker container

Must Read: Creates A Small Dropdown List of Selectable Emojis | EmojiButtonList.js

Simple fgEmojiPicker.js

Post Namefg Emoji Picker JS
Author Namewoody180
CategoryEmoji, Icons
Official PageClick Here
Official Websitegithub.com
Publish DateSeptember 5, 2020
Last UpdateAugust 15, 2023
DownloadLink Below

How to make use of it:

1. Load  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;


  • Trigger – should be an array of objects. Inside the object, there are two properties. The first is the selector, and the second is the insert-into method for determining where to insert the emoji. If there are multiple text areas – you can provide a set of delimiters as well.
  • close button – The closeButton the method can be true or false depending on whether or not you want the close button in the emoji picker.
  • specialButtons – takes the color code to change special button colors (move and close).

See Also –

[Twemoji] Fastest Plug-n-play Emoji Picker for Vue
A Modern GIF | Emoji Picker Vue3 Components For Your App
How to Add Emoji Button In Vanilla JavaScript | emoji-picker

See Demo And Download


Official Website(woody180): Click Here

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

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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