Simple Emoji Picker with Vanilla JavaScript | Emoji Popover

Emoji Popover is a very small but highly customizable component written in Vanilla JavaScript. With this component, users can select emojis from a popup associated with the input field you select.

javascript emoji picker, emoji picker textarea javascript, react emoji picker, vanilla emoji picker, javascript emoji library, emoji picker element

Note that the Emoji Popover JavaScript library does not include any emojis, which means you have to define your own emoji list during init. See below for more details.


  • 📦 brotli: 0.7kb
  • 💻 Vanilla JS, no dependency, use with any framework
  • 🙅‍ No Emoji is integrated
  • ⚙️ Add your own custom emojis, native, image or any text
  • 🎨 Use CSS variables to define any style
  • 🧩 Extend the functionality with plugins

Browser support

Emoji Popover is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer 11 +.

How to make use of it:

1. Install & import the Emoji Popover element with NPM.

$ npm i emoji-popover --save
import EmojiPopover from 'emoji-popover'
import '/node_modules/emoji-popover/dist/style.css'

2. Or include the required JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="dist/style.css" />
<script src="dist/emoji-popover.umd.js"></script>

3. Create a button to toggle the emoji picker popover.

<button class="picker">Pick An Emoji</button>

4. Create an input discipline to show the chosen emoji.

<input class="emoji-picker" />

5. Initialize the emoji picker and accomplished.

const el = new EmojiPopover({
  button: '.picker',
  targetElement: '.emoji-picker',
  emojiList: [
      value: '🤣',
      label: 'laugh and cry'
    // more emoji here

6. Get the chosen emoji.

el.onSelect(l => {

7. More configuration choices.

const el = new EmojiPopover({

  // the emoji picker should be appended to this container
  container: 'body',

  // custom wrapper class
  wrapClassName: '',

  // open/close animation
  wrapAnimationClassName: 'anim-scale-in'


8. Toggle the emoji picker popover manually.


9. Customize the looks of the emoji picker.

:root {
  --e-color-border: #e1e1e1;
  --e-color-emoji-text: #666;
  --e-color-border-emoji-hover: #e1e1e1;
  --e-color-bg: #fff;
  --e-bg-emoji-hover: #f8f8f8;
  --e-size-emoji-text: 16px;
  --e-width-emoji-img: 20px;
  --e-height-emoji-img: 20px;
  --e-max-width: 288px;

Minimal Emoji Picker With Vanilla JavaScript, Emoji Popover Plugin/Github, emoji button js cdn, emoji in html input

See Demo And Download

Official Website(guangzan): Click Here

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

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…